import React, { useState, useEffect } from 'react';
import {
  Input,
  Button,
  Radio,
  Checkbox,
  Row,
  Col,
  Alert,
  Popover,
  Typography,
  Divider,
  DatePicker,
  InputNumber,
} from 'antd';
import { withFormik, Form, Field, FieldArray } from 'formik';
import * as Yup from 'yup';
import moment from 'moment';
import PropTypes from 'prop-types';
import '../assets/styles/default.less';
import history from '../history';
import { laudoDescritivo, microrganismo, conclusao } from '../assets/initialValues';
import { persistUserPropertie, getUserPropertie, getUserData } from '../controllers/user';

// eslint-disable-next-line no-unused-vars
const initialValueSs = [
  'Esfregaço satisfatório para avaliação.',
  'Esfregaço parcialmente limitado pela presença de pouca celularidade.',
  'Esfregaço parcialmente obscurecido pela presença e sobreposição de numerosas hemácias.',
  'Esfregaço parcialmente obscurecido pela concentração e sobreposição de numerosos polimorfonucleados.',
];

// TODO
const userID = 'Alexandre Campos';

const dateFormat = 'DD/MM/YYYY';
const ReportForm = ({ values, errors, touched, handleChange, setFieldValue }) => {
  const [sampleSuitabilities, setSampleSuitabilities] = useState([]);
  const [descReportsVals, setDescReportsVals] = useState([]);
  const [microorganismsVals, setMicroorganismsVals] = useState([]);
  const [conclusionsVals, setConclusionsVals] = useState([]);

  useEffect(() => {
    const getUserDataValues = async () => {
      const userData = await getUserData(userID);
      if (userData) {
        if (userData.sampleSuitabilities && userData.sampleSuitabilities.length >= 1) {
          console.log(userData);
          setSampleSuitabilities(userData.sampleSuitabilities);
        }
        if (userData.descriptiveReports) {
          setDescReportsVals(userData.descriptiveReports);
        }
        // console.log(userData);
      }
    };

    getUserDataValues();
  }, []);

  useEffect(() => {
    const persistSampleSuitabilities = async () => {
      await persistUserPropertie(userID, 'sampleSuitabilities', sampleSuitabilities, true);
    };
    if (sampleSuitabilities && sampleSuitabilities.length >= 1) {
      persistSampleSuitabilities();
    }
  }, [sampleSuitabilities]);

  useEffect(() => {
    const persistDescriptiveReports = async () => {
      await persistUserPropertie(userID, 'descriptiveReports', descReportsVals, true);
    };
    if (descReportsVals.length >= 1) {
      persistDescriptiveReports();
    }
  }, [descReportsVals]);

  useEffect(() => {
    const persistMicroorganisms = async () => {
      await persistUserPropertie(userID, 'microorganisms', microorganismsVals, true);
    };
    if (microorganismsVals.length >= 1) {
      persistMicroorganisms();
    }
  }, [microorganismsVals]);

  useEffect(() => {
    const persistConclusions = async () => {
      await persistUserPropertie(userID, 'conclusions', conclusionsVals, true);
    };
    if (conclusionsVals >= 1) {
      persistConclusions();
    }
  }, [conclusionsVals]);

  const handleEnter = event => {
    switch (event.target.name) {
      case 'sampleSuitability':
        setSampleSuitabilities([...sampleSuitabilities, event.target.value]);
        break;
      case 'microorganisms':
        setMicroorganismsVals([...microorganismsVals, event.target.value]);
        break;
      case 'descReports':
        setDescReportsVals([...descReportsVals, event.target.value]);
        break;
      case 'conclusions':
        setConclusionsVals([...conclusionsVals, event.target.value]);
        break;
      default:
        break;
    }
    event.target.value = '';
    console.log(document.getElementById('sampleSuitabilityInput'));
  };

  const removeItem = async (array, index) => {
    // eslint-disable-next-line no-eval
    const newArray = [...eval(array)];
    newArray.splice(index, 1);
    switch (array) {
      case 'sampleSuitabilities':
        setSampleSuitabilities([...newArray]);
        break;
      case 'conclusions':
        setConclusionsVals([...newArray]);
        break;
      case 'descReports':
        setDescReportsVals([...newArray]);
        break;
      case 'microorganisms':
        setMicroorganismsVals([...newArray]);
        break;

      default:
        break;
    }
  };

  const onDateChange = (date, dateString) => {
    setFieldValue('received', dateString);
  };

  const onAgeChange = age => {
    setFieldValue('patientAge', age);
  };

  return (
    <Form className="frame">
      {/* Beginning of Patient Section */}
      <Typography.Title className="center" level={4}>
        Paciente
      </Typography.Title>
      <label htmlFor="patientName">
        Nome do Paciente
        <Input
          allowClear
          type="name"
          onChange={handleChange}
          value={values.patientName}
          name="patientName"
          placeholder="Nome do Paciente"
          style={{ marginBottom: '20px' }}
        />
      </label>
      <div style={{ marginBottom: '15px' }}>
        <label htmlFor="patientAge">
          {`Idade do Paciente `}
          <InputNumber
            type="number"
            onChange={onAgeChange}
            value={values.patientAge}
            name="patientAge"
          />
        </label>
      </div>
      <label htmlFor="received">
        {`Recebido Em: `}
        <DatePicker
          onChange={onDateChange}
          value={values.received !== '' ? moment(values.received, dateFormat) : null}
          format={dateFormat}
        />
      </label>
      <label htmlFor="released">
        {`Liberado Em: `}
        <DatePicker
          onChange={onDateChange}
          value={values.released !== '' ? moment(values.released, dateFormat) : null}
          format={dateFormat}
        />
      </label>
      <Divider />
      {/* Ending of Patient Section */}
      {/* Beginning of Adequabilidade da amostra */}
      <Typography.Title className="center" level={4}>
        Adequabilidade da Amostra
      </Typography.Title>
      <FieldArray
        name="sampleSuitabilities"
        render={() => (
          <Row type="flex" justify="space-between">
            {sampleSuitabilities && sampleSuitabilities.length > 0 ? (
              <Radio.Group
                name="sampleSuitability"
                value={values.sampleSuitability}
                onChange={val => {
                  values.sampleSuitability = val;
                }}
              >
                {sampleSuitabilities.map((sampleSuitability, index) => (
                  <Col key={sampleSuitability}>
                    <Field
                      type="radio"
                      id={sampleSuitability}
                      value={sampleSuitability}
                      label={sampleSuitability}
                      render={({ field }) => (
                        <Popover
                          placement="topRight"
                          content={
                            <Button
                              icon="delete"
                              type="danger"
                              onClick={() => removeItem('sampleSuitabilities', index)}
                            />
                          }
                        >
                          <Radio {...field}>{sampleSuitability}</Radio>
                        </Popover>
                      )}
                    />
                  </Col>
                ))}
              </Radio.Group>
            ) : (
              <Alert
                message="Você ainda não tem nenhuma Adequabilidade da Amostra adicionada. Preencha o campo de texto abaixo para que o nome do mesmo fique salvo!"
                type="info"
              />
            )}
          </Row>
        )}
      />
      <Input
        allowClear
        // TODO Fix clean
        onPointerMove={e => (e.target.value = '')}
        id="sampleSuitabilityInput"
        type="name"
        name="sampleSuitability"
        placeholder="Adequabilidade da Amostra. Pressione Enter para Adicionar"
        onPressEnter={handleEnter}
        onKeyDown={e => (e.keyCode === 13 ? e.preventDefault() : '')}
        style={{ marginTop: '15px' }}
      />
      <Divider />
      {/* Ending of Adequabilidade da amostra */}
      {/* Beginning epitheliumSamples */}
      <Typography.Title className="center" level={4}>
        Epitélios Representados na Amostra
      </Typography.Title>
      <Checkbox.Group
        name="epitheliumSamples"
        defaultValue={values.epitheliumSamples}
        onChange={val => {
          values.epitheliumSamples = val;
        }}
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <div style={{ display: 'grid', gridColumnGap: '20px' }}>
          <div style={{ display: 'grid', gridColumnStart: '1' }}>
            <b>Escamoso</b>
            <Checkbox value="escamoso (superficial)">Superficial</Checkbox>
            <Checkbox value="escamoso (intermediário)">Intermediário</Checkbox>
            <Checkbox value="escamoso (basal)">Basal</Checkbox>
          </div>
          <div style={{ display: 'grid', gridColumnStart: '2' }}>
            <b>Metaplásico</b>
            <Checkbox value="metaplásico maduro">Maduro</Checkbox>
            <Checkbox value="metaplásico imaturo">Imaturo</Checkbox>
          </div>
          <div style={{ display: 'grid', gridColumnStart: '3' }}>
            <b>Glandular</b>
            <Checkbox value="glandular endocervical">Endocervical</Checkbox>
            <Checkbox value="glandular endometrial">Endometrial</Checkbox>
          </div>
        </div>
      </Checkbox.Group>
      <Divider />
      {/* Ending of epitheliumSamples */}
      <Typography.Title className="center" level={4}>
        Laudo Descritivo
      </Typography.Title>
      <FieldArray
        name="descriptiveReports"
        render={() => (
          <Row type="flex" justify="space-between">
            {descReportsVals && descReportsVals.length > 0 ? (
              <Checkbox.Group
                name="descriptiveReport"
                value={values.descriptiveReports}
                onChange={val => {
                  values.descriptiveReports = val;
                }}
              >
                {descReportsVals.map((descReport, index) => (
                  <Col key={descReport}>
                    <Field
                      type="checkbox"
                      id={descReport}
                      value={descReport}
                      label={descReport}
                      render={({ field }) => (
                        <Popover
                          placement="topRight"
                          content={
                            <Button
                              icon="delete"
                              type="danger"
                              onClick={() => removeItem('descReports', index)}
                            />
                          }
                        >
                          <Checkbox {...field}>{descReport}</Checkbox>
                        </Popover>
                      )}
                    />
                  </Col>
                ))}
              </Checkbox.Group>
            ) : (
              <Alert
                message="Você ainda não tem nenhum Laudo Descritivo adicionado. Preencha o campo de texto abaixo para que o nome do mesmo fique salvo!"
                type="info"
              />
            )}
          </Row>
        )}
      />
      <Input
        allowClear
        // TODO Fix clean
        onPointerMove={e => (e.target.value = '')}
        id="descReportInput"
        type="name"
        name="descReports"
        placeholder="Laudo Descritivo. Pressione Enter para Adicionar"
        onPressEnter={handleEnter}
        onKeyDown={e => (e.keyCode === 13 ? e.preventDefault() : '')}
        style={{ marginTop: '15px' }}
      />
      <Divider />
      <Typography.Title className="center" level={4}>
        Microrganismo
      </Typography.Title>
      <FieldArray
        name="microorganisms"
        render={() => (
          <Row type="flex" justify="space-between">
            {microorganismsVals && microorganismsVals.length > 0 ? (
              <Checkbox.Group
                name="microorganism"
                value={values.microorganisms}
                onChange={val => {
                  values.microorganisms = val;
                }}
              >
                {microorganismsVals.map((microorganism, index) => (
                  <Col key={microorganism}>
                    <Field
                      type="checkbox"
                      id={microorganism}
                      value={microorganism}
                      label={microorganism}
                      render={({ field }) => (
                        <Popover
                          placement="topRight"
                          content={
                            <Button
                              icon="delete"
                              type="danger"
                              onClick={() => removeItem('microorganisms', index)}
                            />
                          }
                        >
                          <Checkbox {...field}>{microorganism}</Checkbox>
                        </Popover>
                      )}
                    />
                  </Col>
                ))}
              </Checkbox.Group>
            ) : (
              <Alert
                message="Você ainda não tem nenhum Microrganismo adicionado. Preencha o campo de texto abaixo para que o nome do mesmo fique salvo!"
                type="info"
              />
            )}
          </Row>
        )}
      />
      <Input
        allowClear
        // TODO Fix clean
        onPointerMove={e => (e.target.value = '')}
        id="microorganismInput"
        type="name"
        name="microorganisms"
        placeholder="Microrganismos. Pressione Enter para Adicionar"
        onPressEnter={handleEnter}
        onKeyDown={e => (e.keyCode === 13 ? e.preventDefault() : '')}
        style={{ marginTop: '15px' }}
      />
      <Divider />
      <Typography.Title className="center" level={4}>
        Conclusão
      </Typography.Title>
      <FieldArray
        name="conclusions"
        render={() => (
          <Row type="flex" justify="space-between">
            {conclusionsVals && conclusionsVals.length > 0 ? (
              <Checkbox.Group
                name="conclusion"
                value={values.conclusions}
                onChange={val => {
                  values.conclusions = val;
                }}
              >
                {conclusionsVals.map((conclusion, index) => (
                  <Col key={conclusion}>
                    <Field
                      type="checkbox"
                      id={conclusion}
                      value={conclusion}
                      label={conclusion}
                      render={({ field }) => (
                        <Popover
                          placement="topRight"
                          content={
                            <Button
                              icon="delete"
                              type="danger"
                              onClick={() => removeItem('conclusions', index)}
                            />
                          }
                        >
                          <Checkbox {...field}>{conclusion}</Checkbox>
                        </Popover>
                      )}
                    />
                  </Col>
                ))}
              </Checkbox.Group>
            ) : (
              <Alert
                message="Você ainda não tem nenhuma Conclusão adicionada. Preencha o campo de texto abaixo para que o nome do mesmo fique salvo!"
                type="info"
              />
            )}
          </Row>
        )}
      />
      <Input
        allowClear
        // TODO Fix clean
        // onPointerMove={e => (e.target.value = '')}
        id="conclusionInput"
        type="name"
        name="conclusions"
        placeholder="Conclusões. Pressione Enter para Adicionar"
        onPressEnter={handleEnter}
        onKeyDown={e => (e.keyCode === 13 ? e.preventDefault() : '')}
        style={{ marginTop: '15px' }}
      />
      <Button icon="file-pdf" htmlType="submit" type="primary">
        Gerar Laudo
      </Button>
    </Form>
  );
};

const FormikForm = withFormik({
  mapPropsToValues({
    patientName,
    patientAge,
    received,
    released,
    sampleSuitability,
    epitheliumSamples,
    descriptiveReports,
    microorganisms,
    conclusions,
  }) {
    return {
      patientName: '' || patientName,
      patientAge: '' || patientAge,
      // TODO set date from edit
      received: '' || moment(received),
      released: '' || moment(released),
      sampleSuitability: '' || sampleSuitability,
      epitheliumSamples: [] || [epitheliumSamples],
      descriptiveReports:
        [
          'Negativo para lesão intra-epitelial ou malignidade (NILM).',
          'Alterações celulares reativas associadas à inflamação.',
        ] || descriptiveReports,
      microorganisms: [] || microorganisms,
      conclusions:
        [
          `O atual estudo citológico não evidencia sinais de lesão intra-epitelial ou malignidade.`,
        ] || conclusions,
    };
  },
  validationSchema: Yup.object().shape({}),
  handleSubmit(values, { resetForm }) {
    console.log('values', values);
    let citoForm = { ...values };
    if (moment.isMoment(citoForm.received)) {
      citoForm = { ...citoForm, received: citoForm.received.format(dateFormat) };
    }
    if (moment.isMoment(citoForm.released)) {
      citoForm = { ...citoForm, released: citoForm.released.format(dateFormat) };
    }
    citoForm = { ...citoForm, patientAge: citoForm.patientAge.toString() };

    if (citoForm.epitheliumSamples.length) {
      let escamoso = `escamoso (`;
      const escamosos = [];
      let aux = ``;

      citoForm.epitheliumSamples.forEach((elem, index) => {
        if (elem.startsWith('escamoso')) {
          escamosos.push(elem);
        }
      });
      citoForm.epitheliumSamples.forEach((elem, index) => {
        if (elem.startsWith('escamoso')) {
          citoForm.epitheliumSamples.splice(index, 1);
        }
      });
      escamosos.forEach((elem, index) => {
        if (escamosos.length === 1) {
          escamoso = elem;
        } else if (index + 1 === escamosos.length) {
          escamoso += `e ${elem.match(/\((.*)\)/)[1]})`;
        } else if (escamosos.length === 2 || index === escamosos.length - 2) {
          escamoso += `${elem.match(/\((.*)\)/)[1]} `;
        } else {
          escamoso += `${elem.match(/\((.*)\)/)[1]}, `;
        }
      });

      if (citoForm.epitheliumSamples[0]) {
        if (citoForm.epitheliumSamples[0].startsWith('escamoso')) {
          citoForm.epitheliumSamples.splice(0, 1, escamoso);
        }
      } else {
        citoForm.epitheliumSamples.splice(0, 0, escamoso);
      }
      citoForm.epitheliumSamples.forEach((elem, index) => {
        if (citoForm.epitheliumSamples.length === 1) {
          aux = elem;
        } else if (index + 1 === citoForm.epitheliumSamples.length) {
          aux += `e ${elem}.`;
        } else if (
          citoForm.epitheliumSamples.length === 2 ||
          index === citoForm.epitheliumSamples.length - 2
        ) {
          aux += `${elem} `;
        } else {
          aux += `${elem}, `;
        }
      });
      citoForm.epitheliumSamples = aux;
      aux = ``;
      citoForm.microorganisms.forEach((elem, index) => {
        if (citoForm.microorganisms.length === 1) {
          aux = elem;
        } else if (index + 1 === citoForm.microorganisms.length) {
          aux += `e ${elem}.`;
        } else if (
          citoForm.microorganisms.length === 2 ||
          index === citoForm.microorganisms.length - 2
        ) {
          aux += `${elem} `;
        } else {
          aux += `${elem}, `;
        }
      });
      citoForm.microorganisms = aux;

      console.log('citoForm', citoForm);
      resetForm();
      if (citoForm) {
        history.push('/ct', citoForm);
      }
    }
  },
})(ReportForm);

ReportForm.propTypes = {
  values: PropTypes.object,
  errors: PropTypes.object,
  touched: PropTypes.object,
  handleChange: PropTypes.func,
  setFieldValue: PropTypes.func,
};
ReportForm.defaultProps = {
  values: '',
  errors: '',
  touched: '',
  handleChange: '',
  setFieldValue: '',
};

export default FormikForm;