import React, { FC } from 'react';
import { Col, Form, Row } from 'react-bootstrap';
import useForm from 'react-hook-form';
import { RouteComponentProps } from 'react-router';
import {
  ACTION_EVENTS,
  alertManager,
  AlertProps,
  AlertType,
  EditForm,
  EditViewProps,
  ERROR,
  getSelectedItem,
  InputGroupInline,
  InputType,
  isEmpty,
  showToast,
  WindowComponent,
} from 'summer';
import { CLASS_NAME, Especie } from '../../../../models/dtos/ger/especie';
import { MODELODOCUMENTOENUM_VALUES } from '../../../../models/enumerated/ger/modeloDocumentoEnum';
import { findEspecieByModelo } from '../../../../services/mlf.service';

interface EspecieEditViewProps extends EditViewProps<Especie> {}

const EspecieEditView: FC<EspecieEditViewProps & RouteComponentProps> = props => {
  const selectedItem = getSelectedItem(props);

  const { reset, ...formProps } = useForm<Especie>({ defaultValues: selectedItem, mode: 'onBlur' });

  function verificarEspecie(formData: Especie): void {
    findEspecieByModelo(formData.modelo, false, {
      errorFunction: mensagem => {
        console.log(mensagem);
        showToast(mensagem, ERROR);
      },
      thenFunction: result => {
        showEspecieExistente(result);
        reset(result);
      },
    });
  }

  function showEspecieExistente(especieResult: Especie): void {
    if (especieResult) {
      const params: AlertProps = {
        message: 'Modelo do Documento já está cadastrado em outra Espécie. Confirma a gravação?',
        type: AlertType.WARNING_YES_NO,
      };
      alertManager.emit(ACTION_EVENTS.SHOW, params);
    }
  }

  const beforePersist = (formData: Especie, done) => {
    const params: AlertProps = {
      message: 'Modelo do Documento NÃO foi preenchido. Confirma a gravação',
      type: AlertType.WARNING_YES_NO,
    };

    if (formData.modelo === null || isEmpty(formData.modelo)) {
      alertManager.emit(ACTION_EVENTS.SHOW, params);
    } else if (formData.modelo) {
      verificarEspecie(formData);
    }
    setTimeout(() => {
      return done(formData);
    }, 2000);
    return { async: true };
  };

  return (
    <WindowComponent title="Manutenção de Espécie" showHeader={props.showHeader}>
      <EditForm formProps={formProps} editViewProps={props} dtoClassName={CLASS_NAME} beforePersist={beforePersist}>
        <Row>
          <Col>
            <InputGroupInline
              formProps={{ ...formProps, validation: { required: true, maxLength: 8 } }}
              id="abreviacao"
              isPrependLabel={true}
              label="Abreviação"
              placeholder="Informe a Abreviação da espécie."
            />
            <InputGroupInline
              formProps={{ ...formProps, validation: { required: true, maxLength: 120 } }}
              id="descricao"
              isPrependLabel={true}
              label="Descrição"
              placeholder="Informe a descrição"
            />
            <InputGroupInline
              formProps={{ ...formProps }}
              id="modelo"
              inputDropDownProps={{ optionsProvider: MODELODOCUMENTOENUM_VALUES }}
              isPrependLabel={true}
              label="Modelo do Documento"
              placeholder="Informe o Modelo do Documento"
              type={InputType.DROP_DOWN}
            />
          </Col>
        </Row>
        <Row>
          <Col>
            <Form.Check
              type="checkbox"
              label="Espécie para Cupom Fiscal ou Máquina Registradora (ECF, CF, CMR)"
              name="cupomFiscalMaqReg"
              ref={formProps.register}
            />
            <Form.Check type="checkbox" label="Habilitar intervalo de Notas Fiscais" name="sequenciarNotas" ref={formProps.register} />
            <Form.Check
              type="checkbox"
              label="Não exigir o preenchimento do Participante nos lançamentos de entrada/saída"
              name="naoValidarParticipante"
              ref={formProps.register}
            />
            <Form.Check type="checkbox" label="Habilitar aba do EFD-Reinf" name="habilitarReinf" ref={formProps.register} />
          </Col>
        </Row>
      </EditForm>
    </WindowComponent>
  );
};

export default EspecieEditView;