import React, { useState } from 'react';
import Button from '@/components/Forms/Button';
import Input from '@/components/Forms/Input';
import InputGroup from '@/components/Forms/InputGroup';
import Breadcrumb from '@/components/Breadcrumbs/Breadcrumb';
import Container from '@/components/Forms/Container';
import { importarContatos } from '@/requests/CRUD/ImportacoesContatos/importarContatos';
import { GetForm } from '@/utils';
import { HiOutlineCloudDownload, HiOutlineCloudUpload } from 'react-icons/hi';
import { toast } from 'react-toastify';
import * as yup from 'yup';
import {
  Table,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';

const ImportacoesContatos = () => {
  const [formYupScheme, setFormYupScheme] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, ''>
  >(yup.object().shape({}));

  const { handleSubmit: formHandleSubmit } = GetForm(
    formYupScheme,
    setFormYupScheme
  );

  const [imagemSelecionada, setImagemSelecionada] = useState('');

  const [contatosNaoCadastrados, setContatosNaoCadastrados] = useState([]);
  const [campoImportacaoVisivel, setCampoImportacaoVisivel] = useState(true);
  const [tabelaContatosVisivel, setTabelaContatosVisivel] = useState(false);
  const [arquivoImportacao, setArquivoImportacao] = useState<any>('');
  const [isLoading, setIsLoading] = useState(false);

  const handleChangeForm = async (data: any) => {
    data['arquivo'] = arquivoImportacao;

    setIsLoading(true);
    const response = await importarContatos(data).finally(() => {
      setIsLoading(false);
    });

    const responseArr = response.split('_?_');
    const status = responseArr[0];
    const mensagem = responseArr[1];

    if (status === '1') {
      toast.success(mensagem);
      setTabelaContatosVisivel(false);
      setCampoImportacaoVisivel(true);
    } else {
      const totalInserted = mensagem.split(' ')[0];
      toast.success(totalInserted + ' novos Contatos cadastrados.');

      if (response && response.length > 0) {
        const startIndex = response.indexOf('Nome:');
        const contatosResponse = response.substring(startIndex);

        const contatosNaoCadastrados = contatosResponse
          .split('Nome:')
          .slice(1)
          .map((item: string) => {
            const partes = item.trim().split(': Motivo:');
            return {
              nome: partes[0].trim(),
              motivo: partes[1].trim(),
            };
          });

        setContatosNaoCadastrados(contatosNaoCadastrados);
      }
      alert(response);

      setTabelaContatosVisivel(true);
      setCampoImportacaoVisivel(false);
    }
  };

  const handleImportAgain = () => {
    setCampoImportacaoVisivel(true);
    setTabelaContatosVisivel(false);
  };

  const handleDownload = () => {
    const link = document.createElement('a');
    link.href = '/arquivos/modelo_importacao.xlsx';
    link.setAttribute('download', 'modelo_importacao.xlsx');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  return (
    <>
      {/*
       * OS: 323047
       * Data: 23/04/2024
       * Leonardo
       */
      /* <Breadcrumb pageName='Importação de Contatos' /> */}

      {campoImportacaoVisivel ? (
        <Container className='mb-6'>
          <div className='flex flex-col justify-end items-end mt-2'>
            <Button
              onClick={handleDownload}
              className='w-full xl:w-1/6 h-[1.8rem] rounded bg-primary p-3 font-medium text-gray flex items-center title-md text-center justify-center'>
              <div className='mr-2'>
                <HiOutlineCloudDownload />
              </div>
              Modelo Padrão
            </Button>
          </div>

          <form
            className='flex flex-col gap-4'
            onSubmit={formHandleSubmit(handleChangeForm)}>
            <InputGroup className='mt-5'>
              <Input
                name='arquivo'
                type='file'
                // isImportScreen={true}
                typeFile='*'
                required
                className='w-60 h-60 rounded'
                error='Insira um arquivo Excel'
                onInputProp={(event: any) => {
                  const inputElement = event.target as HTMLInputElement;

                  if (inputElement.files && inputElement.files.length > 0) {
                    const file = inputElement.files[0];
                    const extension = file.name.split('.').pop()?.toLowerCase();

                    if (extension !== 'csv' && extension !== 'xlsx') {
                      inputElement.value = '';
                      toast.error('O arquivo precisa ser Excel ou CSV!');
                      return;
                    }

                    inputElement.alt;
                    const reader = new FileReader();
                    reader.onloadend = () => {
                      const base64String = reader.result as string;
                      setArquivoImportacao(base64String);
                    };

                    reader.readAsDataURL(file);
                  }
                  return 1;
                }}
              />
            </InputGroup>
            <div className='flex flex-col justify-center items-center'>
              <Button
                type='submit'
                className='w-full xl:w-[210px] h-[2.8rem] mt-8.5 rounded bg-primary p-3 font-medium text-gray flex items-center text-center justify-center'
                loading={isLoading}>
                <div className='mr-2'>
                  <HiOutlineCloudUpload />
                </div>
                Importar Contatos
              </Button>
            </div>
          </form>
        </Container>
      ) : null}

      {tabelaContatosVisivel && (
        <Container className='mb-6 overflow-auto'>
          <Table>
            <TableHeader>
              <TableHead className='font-bold py-2 px-4 border-b text-center'>
                Confira abaixo os contatos que não foram cadastrados com seus
                motivos:
              </TableHead>
            </TableHeader>
            <div className='flex flex-col justify-end items-end mb-5 mt-6'>
              <Button
                onClick={handleImportAgain}
                className='w-full xl:w-1/6 h-[1.8rem] rounded bg-primary p-3 font-medium text-gray flex items-center title-md text-center justify-center'>
                <div className='mr-2'>
                  <HiOutlineCloudUpload />
                </div>
                Importar novamente
              </Button>
            </div>
          </Table>

          <Table
            id='tabela'
            className='min-w-full bg-white dark:bg-[#1d2a39] border border-gray-300 shadow-sm'>
            <TableHeader>
              <TableRow>
                <TableHead className='font-bold py-2 px-4 border-b text-center'>
                  Nome
                </TableHead>
                <TableHead className='font-bold py-2 px-4 border-b text-center'>
                  Motivo
                </TableHead>
              </TableRow>
            </TableHeader>
            <tbody>
              {contatosNaoCadastrados.map((contato: any, index) => (
                <TableRow key={index}>
                  <TableCell className='py-2 text-center border-r'>
                    {contato.nome}
                  </TableCell>
                  <TableCell className='py-2 text-center border-r'>
                    {contato.motivo}
                  </TableCell>
                </TableRow>
              ))}
            </tbody>
          </Table>
        </Container>
      )}
    </>
  );
};

export default ImportacoesContatos;