// LIBRARIES
import React, { Component } from 'react';
import { Menu, Dropdown, notification, Icon, message } from 'antd';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { getCookie } from '../../../../utils/cookie';

// COMPONENTS
import AdvanceTable from "components/NotificationTables";
import HeaderForm from 'components/Forms/HeaderForm';

// HELPER FUNCTIONS
import { API_UNI_OIL } from 'utils/NotificationApi';
import { customAction } from 'actions';

class NotificationList extends Component {
  state = {
    updating: false,
    modal: false,
    subject: '',
    description: '',
  };

  onChange = ({ target }) => {
    this.setState({ [target.name]: target.value }, () => console.log(this.state));
  };

  componentDidMount = () => {
    console.log(getCookie('TOKEN').token);
  };

  render() {
    const { match, history } = this.props;

    return (
      <div style={{ border: '1px solid #E6ECF5' }}>
        {this.state.modal && (
          <div
            style={{
              position: 'fixed',
              top: 0,
              left: 0,
              width: '100%',
              height: '100vh',
              backgroundColor: 'rgba(0, 0, 0, 0.2)',
              zIndex: 1000,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <div
              style={{
                width: '100%',
                height: '100vh',
                maxWidth: '530px',
                maxHeight: '350px',
                backgroundColor: '#ffffff',
                paddingTop: '25px',
                paddingBottom: '25px',
                paddingRight: '30px',
                paddingLeft: '30px',
              }}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ fontSize: 15 }}>Add Notification</span>
                <span
                  style={{ fontWeight: 'bold', fontSize: 20, cursor: 'pointer' }}
                  onClick={() => {
                    this.setState({ modal: false });
                  }}
                >
                  x
                </span>
              </div>
              <hr style={{ borderTopWidth: '1px', borderTopColor: '#AAAAAA' }} />
              <input
                type='text'
                placeholder='Subject'
                style={{
                  width: '100%',
                  fontSize: '10px',
                  borderWidth: 0,
                  height: '30px',
                  borderBottomWidth: '0px',
                  borderBottomColor: '#aaaaa',
                }}
                name='subject'
                onChange={this.onChange}
                value={this.state.subject}
              />
              <hr style={{ borderBottomWidth: '0px', borderTopColor: '#AAAAAA' }} />
              <textarea
                style={{
                  width: '100%',
                  height: '120px',
                  fontSize: '10px',
                }}
                type='text'
                placeholder='Description'
                name='description'
                onChange={this.onChange}
                value={this.state.description}
              />
              <br />
              <br />
              <br />

              <div>
                <input
                  style={{
                    color: 'white',
                    marginLeft: '15px',
                    borderRadius: '5px',
                    height: '30px',
                    float: 'right',
                    width: '100px',
                    background: '#E74610',
                  }}
                  type='submit'
                  value='Submit'
                  onClick={async () => {
                    console.log('its here');
                    const rawResponse = await fetch('https://mobileapid.unioil.com/api/cms/notification', {
                      method: 'POST',
                      headers: {
                        Accept: '*/*',
                        'Content-Type': 'application/json',
                        Authorization: `Bearer ${getCookie('TOKEN').token}`,
                      },
                      body: JSON.stringify({
                        subject: this.state.subject,
                        description: this.state.description,
                      }),
                    });
                    console.log(rawResponse);
                    const content = await rawResponse.json();
                    console.log(content);
                    window.location.reload();
                  }}
                />
                <input
                  style={{
                    color: 'white',
                    borderRadius: '7px',
                    height: '30px',
                    float: 'right',
                    width: '100px',
                    background: '#2E2E2E',
                  }}
                  type='submit'
                  value='Cancel'
                  onClick={() => this.setState({ modal: false })}
                />
              </div>
            </div>
          </div>
        )}
        <HeaderForm
          title='Notifications'
          action={()=> history.push({ pathname: `${match.url}/create` })}
          actionBtnName='Add Notification'
        />
        <AdvanceTable
          updating={this.state.updating}
          keyValue='id'
          url={{
            default: 'notification',
            defaultWithFilter:'notification',
          }}
          columns={[
            {
              title: 'ID',
              dataIndex: 'id',
              key: 'id',
              sorter: true,
              filters: [],
              width: '10%',
            },
            {
              title: 'Subject',
              dataIndex: 'subject',
              key: 'subject',
              sorter: true,
              filters: [],
              width: '10%',
            },
            {
              title: 'Content',
              dataIndex: 'content',
              key: 'content',
              sorter: true,
              filters: [],
              width: '30%',
            },
            {
              title: 'Is Scheduled',
              dataIndex: 'isScheduled',
              key: 'isScheduled',
              sorter: true,
              filters: [],
              width: '20%',
            },
            {
              title: 'Schedule',
              dataIndex: 'schedule',
              key: 'schedule',
              sorter: true,
              filters: [],
              width: '20%',
            },
            {
              title: 'Expiration',
              dataIndex: 'expiration',
              key: 'expiration',
              sorter: true,
              filters: [],
              width: '20%',
            }
          ]}
        />
      </div>
    );
  }
}

NotificationList = connect(
  (state) => ({
    //user: state.viewUser.data,
    //status: state.viewUser.code,
    //responseMsg: state.viewUser.messages
  }),
  { customAction }
)(NotificationList);

export default NotificationList;
