import React, { FC, useEffect } from 'react';
import { Col, Row } from 'react-bootstrap';
import useForm from 'react-hook-form';
import { RouteComponentProps } from 'react-router';
import { EditForm, EditViewProps, ERROR, findByExample, InputGroupInline, InputType, showToast, WindowComponent } from 'summer';
import { CLASS_NAME, LivroFolha } from '../../../models/dtos/mcg/livroFolha';

interface LivroFolhaEditViewProps extends EditViewProps<LivroFolha> {}

function validateExtras(formData: any): string[] {
  const errors = [];

  if (formData.diarioFolha === 1) {
    errors.push('Página Inicial - Diário não pode ser igual a 1, caso não deseje configura-lá utilize 0');
  }

  if (formData.caixaFolha === 1) {
    errors.push('Página Inicial - Caixa não pode ser igual a 1, caso não deseje configura-lá utilize 0');
  }

  if (formData.razaoFolha === 1) {
    errors.push('Página Inicial - Razão não pode ser igual a 1, caso não deseje configura-lá utilize 0.');
  }

  if (formData.lalurAFolha === 1) {
    errors.push("Página Inicial - Lalur Parte 'A' não pode ser igual a 1, caso não deseje configura-lá utilize 0");
  }
  return errors;
}

const LivroFolhaEditView: FC<LivroFolhaEditViewProps & RouteComponentProps> = props => {
  const { reset, ...formProps } = useForm({ mode: 'onBlur' });

  useEffect(() => {
    const example: LivroFolha = { id: null, entity: null };
    findByExample(example, CLASS_NAME, {
      errorFunction: (mensagem: string): void => {
        showToast(mensagem, ERROR);
      },
      thenFunction: (result: LivroFolha): void => {
        setTimeout(() => reset(result), 500);
      },
    });
  }, [reset]);

  return (
    <WindowComponent>
      <EditForm formProps={formProps} editViewProps={props} dtoClassName={CLASS_NAME} validateExtras={validateExtras}>
        <Row>
          <label>
            <strong>Básico</strong>
          </label>
          <Col xs={3}>
            <label>
              <strong>Nº Livro</strong>
            </label>
            <InputGroupInline
              formProps={{ ...formProps, validation: { required: true } }}
              id="tiDiarioLivro"
              label="Diário"
              type={InputType.NUMBER}
              isPrependLabel={true}
            />
            <InputGroupInline
              formProps={{ ...formProps, validation: { required: true } }}
              id="tiCaixaLivro"
              label="Caixa"
              type={InputType.NUMBER}
              isPrependLabel={true}
            />
            <InputGroupInline
              formProps={{ ...formProps, validation: { required: true } }}
              id="tiRazaoLivro"
              label="Razão"
              type={InputType.NUMBER}
              isPrependLabel={true}
            />
            <InputGroupInline
              formProps={{ ...formProps, validation: { required: true } }}
              id="tiLalurALivro"
              label="Lalur Parte 'A'"
              type={InputType.NUMBER}
              isPrependLabel={true}
            />
          </Col>
          <Col xs={2}>
            <label>
              <strong>Página Inicial</strong>
            </label>
            <InputGroupInline formProps={{ ...formProps, validation: { required: true } }} id="tiDiarioFolha" type={InputType.NUMBER} />
            <InputGroupInline
              formProps={{ ...formProps, validation: { required: true } }}
              id="tiCaixaFolha"
              type={InputType.NUMBER}
              value="@{pm.livroFolha.caixaFolha}"
            />
            <InputGroupInline formProps={{ ...formProps, validation: { required: true } }} id="tiRazaoLivro" type={InputType.NUMBER} />
            <InputGroupInline formProps={{ ...formProps, validation: { required: true } }} id="tiLalurAFolha" type={InputType.NUMBER} />
          </Col>
          <label>
            <strong>SPED</strong>
          </label>
          <Col xs={3}>
            <label>
              <strong>Nº de Ordem</strong>
            </label>
            <InputGroupInline
              formProps={{ ...formProps, validation: { required: true } }}
              id="tiDiarioGeral"
              label="G - Diário Geral"
              type={InputType.NUMBER}
              isPrependLabel={true}
            />
          </Col>
        </Row>
      </EditForm>
    </WindowComponent>
  );
};

export default LivroFolhaEditView;