import React, { createRef, Fragment, useEffect, useState } from 'react';
import {
  Breadcrumb,
  BreadcrumbItem,
  Card,
  CardBody,
  Col,
  DropdownItem,
  DropdownMenu,
  DropdownToggle,
  Form,
  FormGroup,
  Input,
  Label,
  Media,
  Row,
  UncontrolledDropdown,
  Spinner,
  CustomInput,
  Button
} from 'reactstrap';
import Cascader from 'rc-cascader';
import loadable from '@loadable/component';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Link } from 'react-router-dom';
import Flex from '../../common/Flex';
import { getCookieValue, createCookie } from '../../../helpers/utils';
import withRedirect from '../../../hoc/withRedirect';
import { withTranslation } from 'react-i18next';
import { toast } from 'react-toastify';
import ButtonIcon from '../../common/ButtonIcon';
import { APIBaseURL } from '../../../config';

const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
  useEffect(() => {
    let is_logged_in = getCookieValue('is_logged_in');
    let user_name = getCookieValue('user_name');
    let user_display_name = getCookieValue('user_display_name');
    let user_uuid = getCookieValue('user_uuid');
    let token = getCookieValue('token');
    if (is_logged_in === null || !is_logged_in) {
      setRedirectUrl(`/authentication/basic/login`);
      setRedirect(true);
    } else {
      //update expires time of cookies
      createCookie('is_logged_in', true, 1000 * 60 * 60 * 8);
      createCookie('user_name', user_name, 1000 * 60 * 60 * 8);
      createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8);
      createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8);
      createCookie('token', token, 1000 * 60 * 60 * 8);
    }
  });
  let table = createRef();

  // State
  const [selectedTicketType, setSelectedTicketType] = useState(1);
  const [ticketTypes, setTicketTypes] = useState([]);
  const [ticketList, setTicketList] = useState([]);
  const [ticketApplicationfields, setTicketApplicationfields] = useState({});

  const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
  const [cascaderOptions, setCascaderOptions] = useState(undefined);
  const [equipmentList, setEquipmentList] = useState([]);
  const [spinnerHidden, setSpinnerHidden] = useState(false);
  const [exportButtonHidden, setExportButtonHidden] = useState(true);
  const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);

  useEffect(() => {
    let isResponseOK = false;
    // Get Ticket Type
    fetch(APIBaseURL + '/ticket/types', {
      method: 'GET',
      headers: {
        'Content-type': 'application/json'
      },
      body: null
    })
      .then(response => {
        console.log(response);
        if (response.ok) {
          isResponseOK = true;
        }
        return response.json();
      })
      .then(json => {
        if (isResponseOK) {
          console.log('000', ticketTypes);
          console.log('111', typeof json, json[0].id, json[0].name);
          // console.log('111', typeof(json),json);
          setTicketTypes(json);
        } else {
          toast.error(json.description);
        }
      })
      .catch(err => {
        console.log(err);
      });
  }, []);

  useEffect(() => {
    let isResponseOK = false;
    // Get Ticket List
    fetch(APIBaseURL + '/ticket/list', {
      method: 'GET',
      headers: {
        'Content-type': 'application/json'
      },
      body: null
    })
      .then(response => {
        console.log(response);
        if (response.ok) {
          isResponseOK = true;
        }
        return response.json();
      })
      .then(json => {
        if (isResponseOK) {
          console.log('/ticket/list', json);
          setTicketList(json);
        } else {
          toast.error(json.description);
        }
      })
      .catch(err => {
        console.log(err);
      });
  }, []);

  const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));

  const nameFormatter = (dataField, { name }) => (
    <Link to="#">
      <Media tag={Flex} align="center">
        <Media body className="ml-2">
          <h5 className="mb-0 fs--1">{name}</h5>
        </Media>
      </Media>
    </Link>
  );

  const actionFormatter = (dataField, { id }) => (
    // Control your row with this id
    <UncontrolledDropdown>
      <DropdownToggle color="link" size="sm" className="text-600 btn-reveal mr-3">
        <FontAwesomeIcon icon="ellipsis-h" className="fs--1" />
      </DropdownToggle>
      <DropdownMenu right className="border py-2">
        <DropdownItem onClick={() => console.log('Edit: ', id)}>{t('Edit Equipment')}</DropdownItem>
      </DropdownMenu>
    </UncontrolledDropdown>
  );

  const columns = [
    {
      key: 'a00',
      dataField: 'id',
      headerClasses: 'border-0',
      text: t('ID'),
      classes: 'border-0 py-2 align-middle',
      sort: true
    },
    {
      key: 'a0',
      dataField: 'title',
      headerClasses: 'border-0',
      text: t('Title'),
      classes: 'border-0 py-2 align-middle',
      sort: true
    },
    {
      key: 'a1',
      dataField: 'ticket_type',
      headerClasses: 'border-0',
      text: t('Ticket Type'),
      classes: 'border-0 py-2 align-middle',
      sort: true
    },
    {
      key: 'a2',
      dataField: 'sn',
      headerClasses: 'border-0',
      text: t('Serial Number'),
      classes: 'border-0 py-2 align-middle',
      sort: true
    },
    {
      key: 'a3',
      dataField: 'state',
      headerClasses: 'border-0',
      text: t('Ticket State'),
      classes: 'border-0 py-2 align-middle',
      sort: true
    },
    {
      key: 'a4',
      dataField: 'creator',
      headerClasses: 'border-0',
      text: t('Ticket Creator'),
      classes: 'border-0 py-2 align-middle',
      sort: true
    },
    {
      key: 'a5',
      dataField: 'gmt_created',
      headerClasses: 'border-0',
      text: t('Created Time'),
      classes: 'border-0 py-2 align-middle',
      sort: true
    },
    {
      key: 'a6',
      dataField: 'gmt_modified',
      headerClasses: 'border-0',
      text: t('Modified Time'),
      classes: 'border-0 py-2 align-middle',
      sort: true
    },

    {
      key: 'a000',
      dataField: '',
      headerClasses: 'border-0',
      text: '',
      classes: 'border-0 py-2 align-middle',
      formatter: actionFormatter,
      align: 'right'
    }
  ];

  const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';

  let onWorkflowTypeChange = ({ target }) => {
    setSelectedTicketType(target.value);
  };

  let applyTicket = () => {
    console.log("You apply the ticket!!", selectedTicketType);

    let isResponseOK = false;
    fetch(APIBaseURL + '/ticket/apply/' + selectedTicketType, {
      method: 'GET',
      headers: {
        'Content-type': 'application/json'
      },
      body: null
    })
      .then(response => {
        console.log(response);
        if (response.ok) {
          isResponseOK = true;
        }
        return response.json();
      })
      .then(json => {
        if (isResponseOK) {
          console.log('/ticket/apply', json);
          setTicketApplicationfields(json);
        } else {
          toast.error(json.description);
        }
      })
      .catch(err => {
        console.log(err);
      });
  }; 
  
  useEffect(() => {
    console.log('selectedTicketType', selectedTicketType);
  }, [selectedTicketType]);

  useEffect(() => {
    console.log('ticketApplicationfields', ticketApplicationfields);
  }, [ticketApplicationfields]);

  return (
    <Fragment>
      <div>
        <Breadcrumb>
          <BreadcrumbItem>{t('Ticket')}</BreadcrumbItem>
          <BreadcrumbItem active>{t('Ticket List')}</BreadcrumbItem>
        </Breadcrumb>
      </div>
      <Card className="bg-light mb-3">
        <CardBody className="p-3">
          <Form>
            <Row form>
              <Col xs="auto">
                <FormGroup>
                  <Label className={labelClasses} for="workflowType">
                    {t('Ticket Type')}
                  </Label>
                  <CustomInput type="select" id="workflowType" name="workflowType" onChange={onWorkflowTypeChange}>
                    {ticketTypes.map((ticketType, index) => (
                      <option value={ticketType.id} key={ticketType.id}>
                        {t(ticketType.name)}
                      </option>
                    ))}
                  </CustomInput>
                </FormGroup>
              </Col>
              <Col xs="auto">
                <br />
                <ButtonIcon
                  icon="external-link-alt"
                  transform="shrink-3 down-2"
                  color="falcon-default"
                  onClick={applyTicket}
                >
                  {t('Apply')}
                </ButtonIcon>
              </Col>
            </Row>
          </Form>
        </CardBody>
      </Card>
      <DetailedDataTable data={ticketList} title={t('Ticket List')} columns={columns} pagesize={10} />
    </Fragment>
  );
};

export default withTranslation()(withRedirect(TicketList));