import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import Button from "@/components/Forms/Button";
import Container from "@/components/Forms/Container";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import ModalComponente from "@/components/Modal/ModalComponente";
import SweetAlertConfirmacao from "@/components/Modal/SweetAlertConfirm";
import { baixarAws, baixarAwsBase64 } from "@/requests/common/Aws/baixarAws";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { listarProblemas } from "@/requests/CRUD/Problemas/listarProblemas";
import {
  atualizarStatusTarefa,
  concluirTarefa,
  editarDemanda,
} from "@/requests/CRUD/Tarefa/editasTarefa";
import { listarDemandas } from "@/requests/CRUD/Tarefa/listarTarefas";
import { listarUsuarios } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useAuth } from "@/src/contexts/authContext";
import { GetForm } from "@/utils";
import { parseISO } from "date-fns";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import { FaArrowAltCircleRight, FaFileImage } from "react-icons/fa";
import { IoIosCheckmarkCircle } from "react-icons/io";
import { MdChangeCircle } from "react-icons/md";
import * as yup from "yup";

const Tarefas = () => {
  const [dataInicio, setDataInicio] = useState<any>("");
  const [dataFim, setDataFim] = useState<any>("");
  const [error, setError] = useState<any>("");
  const [tarefaStatus0, setTarefaStatus0] = useState([]);
  const [tarefaStatus1, setTarefaStatus1] = useState([]);
  const [tarefaStatus2, setTarefaStatus2] = useState([]);
  const [problemas, setProblemas] = useState([]);
  const [optionsUsuario, setOptionsUsuario] = useState([]);
  const [dadosAtualCard, setDadosAtualCard] = useState<any>();
  const [problemaValue, setProblemaValue] = useState("1");
  const [statusFilter, setStatusFilter] = useState<any>([]);
  const [dadosForm, setDadosForm] = useState<any[""]>([""]);
  const [modalAprovar, setModalAprovar] = useState(false);
  const [modalTrocaResponsavel, setModalTrocaResponsavel] = useState(false);
  const [isCampoDesabilitado, setIsCampoDesabilitado] = useState(true);
  const [isLoading, setIsLoading] = useState(false);
  const [activeContent, setActiveContent] = useState(false);
  const [modalAnexo, setModalAnexo] = useState(false);
  const [anexoTarefaFile, setAnexoTarefaFile] = useState<any>("");
  const [anexoAtendimento, setAnexoAtendimento] = useState<any>("");
  const [anexoTarefaBase64, setAnexoTarefaBase64] = useState<any>("");
  const [anexoTarefa, setAnexoTarefa] = useState<any>("");
  const [lojasOptions, setLojasOptions] = useState<any>([]);
  const [selectedLoja, setSelectedLoja] = useState<any>([]);
  const tarefas = [
    { nome: "Não Iniciada", cor: "danger", state: tarefaStatus0, value: "0" },
    {
      nome: "Em Progresso",
      cor: "secondaryMenu",
      state: tarefaStatus1,
      value: "1",
    },
    { nome: "Concluída", cor: "success", state: tarefaStatus2, value: "2" },
  ];

  const handleDataInicioChange = (e: any) => {
    setDataInicio(e.target.value);
    if (dataFim && e.target.value > dataFim) {
      setError("A data de início não pode ser maior que a data de fim.");
    } else {
      setError("");
    }

    const dataFimFormat = new Date(dataFim);
    const dataInicioFormat: any = new Date(e.target.value);

    const diffTime = Math.abs(+dataFimFormat - +dataInicioFormat);

    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    const diffYears = diffDays / 365;

    if (diffYears > 1) {
      setError("A diferença entre as datas não pode ser maior que 1 ano.");
    } else {
      setError("");
    }
  };
  const { valuesSession, perfil } = useAuth();
  const { session } = valuesSession();
  const id_usuario = session.id_usuario;
  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const [yupSchemaConcluir, setYupSchemaConcluir] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));

  const { handleSubmit, ...form } = GetForm(yupSchema, setYupSchema);
  const { handleSubmit: handleConcluir, ...formConcluir } = GetForm(
    yupSchemaConcluir,
    setYupSchemaConcluir
  );

  const handleDataFimChange = (e: any) => {
    setDataFim(e.target.value);
    if (dataInicio && e.target.value < dataInicio) {
      setError("A data de fim não pode ser menor que a data de início.");
    } else {
      setError("");
    }

    const dataFim = new Date(e.target.value);
    const dataInicioFormat: any = new Date(dataInicio);

    const diffTime = Math.abs(+dataFim - +dataInicioFormat);

    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    const diffYears = diffDays / 365;

    if (diffYears > 1) {
      setError("A diferença entre as datas não pode ser maior que 1 ano.");
    } else {
      setError("");
    }
  };

  useEffect(() => {
    if (perfil?.visualiza_todos_contatos_perfil == "1") {
      setIsCampoDesabilitado(false);
    }
  }, [perfil]);

  useEffect(() => {
    listarLojas().then((res) => {
      const idsLojaUsuario = session.id_loja_usuario
        .split(",")
        .map((id: any) => id.trim());

      const filtered = res.filter((loja: any) =>
        idsLojaUsuario.includes(loja.id_loja?.toString())
      );

      setLojasOptions(filtered);
    });
    listarUsuarios(session.id_loja_usuario).then((e) => setOptionsUsuario(e));
    listarProblemas().then((e: any) => setProblemas(e));
    setSelectedLoja([session.loja_padrao_usuario]);
  }, []);

  const onSubmitFunction = (data: FieldValues) => {
    setIsLoading(true);
    setDadosForm(data);
    setStatusFilter(data["status"]);
    listarTarefasFunction(data);
  };
  const onSubmitConcluir = (data: FieldValues) => {
    if (data["problema"] == "1") {
      form.setValue("motivo_naoResolvido_demanda" as never, 0 as never);
    }
    let dataAtual = new Date();
    const newData = {
      id_demanda: dadosAtualCard["id_demanda"],
      status_demanda: 2,
      data_conclusao_demanda: dataAtual,
      responsavel_conclusao_demanda: id_usuario,
      ...data,
    };
    setIsLoading(true);
    concluirTarefa(newData)
      .then(() => {
        listarTarefasFunction(dadosForm);
        setModalAprovar(false);
      })
      .finally(() => {
        setIsLoading(false);
      });
  };

  const listarTarefasFunction = (data: FieldValues) => {
    listarDemandas(data)
      .then((e: any) => {
        setActiveContent(true);

        const status0 = e.filter((res: any) => res.status_demanda == 0);
        setTarefaStatus0(status0);
        const status1 = e.filter((res1: any) => res1.status_demanda == 1);
        setTarefaStatus1(status1);
        const status2 = e.filter((res2: any) => res2.status_demanda == 2);
        setTarefaStatus2(status2);
      })
      .finally(() => setIsLoading(false));
  };
  const handleEnviarAnexo = () => {
    setIsLoading(true);
    const newData: any = {
      status_demanda: 1,
      anexo_demanda: anexoTarefaFile,
      id_demanda: dadosAtualCard.id_demanda,
      cliente_atendimento: dadosAtualCard.cliente_atendimento,
    };
    const formData = new FormData();
    Object.keys(newData).forEach((key: any) => {
      formData.append(key, newData[key]);
    });

    editarDemanda(formData)
      .then(() => {
        setModalAnexo(false);
        listarTarefasFunction(dadosForm);
      })
      .finally(() => setIsLoading(false));
  };

  const statusOptions = [
    { value: "0", label: "Não Iniciada" },
    { value: "1", label: "Em Progresso" },
    { value: "2", label: "Concluída" },
  ];

  useEffect(() => {
    if (dadosAtualCard) {
      if (dadosAtualCard.anexo_atendimento) {
        baixarAws(dadosAtualCard.anexo_atendimento).then((e) => {
          setAnexoAtendimento(e);
        });
      }

      if (dadosAtualCard.anexo_demanda) {
        baixarAws(dadosAtualCard.anexo_demanda).then((e) => {
          setAnexoTarefa(e);
        });
        baixarAwsBase64(dadosAtualCard.anexo_demanda).then((result) => {
          const resultObject =
            typeof result === "string" ? JSON.parse(result) : result;
          const base64Content = resultObject.base64;

          const byteCharacters = atob(base64Content);
          const byteNumbers = new Array(byteCharacters.length);
          for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
          }
          const byteArray = new Uint8Array(byteNumbers);
          const blob = new Blob([byteArray], {
            type: "application/octet-stream",
          });

          const fileName = dadosAtualCard.anexo_demanda.split("/").pop();
          const file = new File([blob], fileName, { type: blob.type });

          setAnexoTarefaFile(file);
          setAnexoTarefaBase64(base64Content);
        });
      } else {
        setAnexoTarefaBase64("");
      }
    }
  }, [dadosAtualCard]);

  return (
    <>
      <Breadcrumb pageName="Demandas" />
      <Container>
        <form onSubmit={handleSubmit(onSubmitFunction)}>
          {error && (
            <div className="w-full flex flex-col items-center justify-center p-2">
              <span className="text-danger p-2 text-xl bg-stroke bg-opacity-70 rounded-md">
                {error}
              </span>
            </div>
          )}

          <InputGroup>
            <InputSelectComponent
              label="Loja"
              formulario={form}
              // width="w-[450px]"
              isMulti
              name="loja"
              options={lojasOptions.map((e: any) => ({
                label: `${e.nome_loja}`,
                value: `${e.id_loja}`,
              }))}
              onChange={(selectedOptions: any) => {
                if (selectedOptions.some((e: any) => e.value == "*")) {
                  setSelectedLoja(lojasOptions.map((e: any) => e.id_loja));
                } else {
                  setSelectedLoja(selectedOptions.map((e: any) => e.value));
                }
              }}
              defaultValue={session.loja_padrao_usuario}
            />
            <InputSelectComponent
              label="Usuário"
              name="usuario"
              formulario={form}
              isMulti
              required
              options={[
                { value: "*", label: "Todos" },
                ...optionsUsuario
                  .filter((vendedor: any) =>
                    selectedLoja?.some((loja: any) =>
                      vendedor.loja_usuario?.split(",").includes(loja)
                    )
                  )
                  .map((vendedor: any) => ({
                    value: vendedor.id_usuario,
                    label: vendedor.nome_usuario,
                  })),
              ]}
              onChange={(selectedOptions: any) => {
                if (selectedOptions.some((e: any) => e.value == "*")) {
                  if (selectedOptions.some((e: any) => e.value == "*")) {
                    form.setValue(
                      "usuario" as never,
                      [{ label: "Todos", value: "*" }] as never
                    );
                  }
                }
              }}
              disabled={isCampoDesabilitado || selectedLoja.length == 0}
              defaultValue={
                perfil?.visualiza_todos_contatos_perfil == 1
                  ? id_usuario
                  : undefined
              }
            />

            <InputSelectComponent
              isMulti
              label="Status"
              skipEffect
              // width="w-[900px]"
              name="status"
              options={[
                { value: "*", label: "Todos" },
                ...statusOptions.map((e: any) => ({
                  value: e.value,
                  label: e.label,
                })),
              ]}
              onChange={(selectedOptions: any) => {
                if (selectedOptions.some((e: any) => e.value == "*")) {
                  if (selectedOptions.some((e: any) => e.value == "*")) {
                    form.setValue(
                      "status" as never,
                      [{ label: "Todos", value: "*" }] as never
                    );
                  }
                }
              }}
              formulario={form}
            />
          </InputGroup>
          <InputGroup>
            <Input
              label="Data Inicio"
              name="data_inicio"
              formulario={form}
              type="date"
              onChange={handleDataInicioChange}
            />
            <Input
              label="Data Fim"
              name="data_fim"
              formulario={form}
              type="date"
              onChange={handleDataFimChange}
            />
          </InputGroup>
          <div className="flex flex-col justify-center items-center mb-5">
            <Button loading={isLoading} disabled={error}>
              Confirmar
            </Button>
          </div>
        </form>

        <div className={`grid grid-cols-3 gap-4 w-full h-full`}>
          {activeContent &&
            tarefas
              .filter(
                (tarefa) =>
                  statusFilter.length === 0 ||
                  statusFilter.includes(tarefa.value) ||
                  statusFilter.includes("*")
              )
              .map((e: any, index: any) => (
                <div
                  className="bg-stroke dark:bg-black bg-opacity-40 px-4 rounded-xl h-[500px] overflow-auto"
                  key={index}
                  style={{
                    border: "3px solid " + `rgba(${108}, ${115}, ${149}, 0.2)`,
                    // height: "calc(96vh)",
                  }}
                >
                  <div
                    className={`flex flex-row gap-2 text-black dark:text-white border-b-2 border-${e.cor} text-sm mt-2 p-2 px-4 items-center rounded-md`}
                    style={{
                      backgroundColor: `rgba(0,0,0,0.08)`,
                    }}
                  >
                    <strong>{e.nome}</strong>{" "}
                    <div className="bg-white w-4 h-4 rounded-full text-center text-[10px] flex justify-center items-center">
                      <strong className="text-black">{e.state.length}</strong>
                    </div>
                  </div>
                  <div className="h-[90%] pt-2 overflow-hidden">
                    <div className="h-[100%] overflow-auto p-2 flex flex-col gap-4 ">
                      {e.state.map((res: any, index: any) => {
                        const dataBanco = parseISO(res.data_demanda);
                        const dataFormatada = new Date(
                          dataBanco
                        ).toLocaleDateString("pt-br");
                        return (
                          <div
                            className="flex flex-col bg-white border-2 border-[#c1c1c1] dark:bg-boxdark w-68 rounded-xl p-[15px] cursor-pointer shadow-[0_1px_4px_0_rgba(192,208,230,0.8)]"
                            key={index}
                          >
                            <div>
                              <div
                                key={res.id_demanda}
                                onClick={() => {
                                  setDadosAtualCard(res);
                                }}
                              >
                                <div className="flex flex-row justify-between">
                                  <div className="text-[14px] w-[30px] h-[28px] flex items-center justify-center font-bold rounded-sm bg-primary text-white">
                                    {res.id_demanda}
                                  </div>

                                  <div className="text-[14px] font-semibold">
                                    {res.nome_usuario}
                                  </div>
                                </div>
                                <div className="flex flex-row justify-between">
                                  {res.nome_atendimento}
                                  <div className="text-[14px]">
                                    {" "}
                                    Dias: {res.prazo_resolucao_prioridade}
                                  </div>
                                </div>
                                <div className="text-[14px]">
                                  {res.loja_demanda
                                    ? lojasOptions.find(
                                        (e: any) =>
                                          e.id_loja == res.loja_demanda
                                      )?.nome_loja
                                    : "Sem Loja"}
                                </div>
                                <div className="text-[14px] my-1">
                                  {dataFormatada}
                                </div>
                                {e.value == 2 && (
                                  <div className="flex items-center gap-2">
                                    <div
                                      className={`rounded-full bg-${res.motivo_naoResolvido_demanda > 0 ? "danger" : "success"} h-2 w-2`}
                                    ></div>
                                    <span className="text-[14px]">
                                      {res.motivo_naoResolvido_demanda > 0
                                        ? "Não Resolvido"
                                        : "Resolvido"}
                                    </span>
                                  </div>
                                )}
                              </div>
                            </div>
                            {e.value != 0 && e.value != 2 && (
                              <div className="flex flex-row justify-between mt-2 p-1">
                                <MdChangeCircle
                                  color={"blue"}
                                  size={22}
                                  onClick={() => {
                                    setDadosAtualCard(res);
                                    setModalTrocaResponsavel(true);
                                  }}
                                />
                                <IoIosCheckmarkCircle
                                  color={"green"}
                                  size={23}
                                  onClick={() => {
                                    setDadosAtualCard(res);
                                    setModalAprovar(true);
                                  }}
                                />
                                <FaFileImage
                                  color={"blue"}
                                  size={17}
                                  onClick={() => {
                                    setDadosAtualCard(res);
                                    setModalAnexo(true);
                                  }}
                                />
                              </div>
                            )}

                            {e.value == 0 && (
                              <div className="flex flex-row justify-between mt-2 p-1">
                                {" "}
                                <MdChangeCircle
                                  color={"blue"}
                                  size={22}
                                  onClick={() => {
                                    setDadosAtualCard(res);
                                    setModalTrocaResponsavel(true);
                                  }}
                                />
                                <SweetAlertConfirmacao
                                  resultConfirmed={() => {
                                    atualizarStatusTarefa({
                                      id: res.id_demanda,
                                    }).then(() => {
                                      listarTarefasFunction(dadosForm);
                                    });
                                  }}
                                  className="bg-transparent p-0"
                                  tittle="Prosseguir Tarefa"
                                  html="<span> Confirme se deseja mover a tarefa para <strong> Em Progresso </strong> </span>"
                                >
                                  <FaArrowAltCircleRight
                                    color={"blue"}
                                    size={19}
                                  />
                                </SweetAlertConfirmacao>
                              </div>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  </div>
                </div>
              ))}
          {dadosAtualCard && (
            <>
              <ModalComponente
                hasForm={false}
                defaultW="300px"
                opened={!!dadosAtualCard}
                hasSaveButton={false}
                onClose={() => setDadosAtualCard(undefined)}
                header={` Visualização Da Tarefa (ID: ${dadosAtualCard.id_demanda})`}
              >
                <div className="flex flex-col w-80 overflow-auto">
                  <div className="dark:text-white">
                    <strong>
                      Visualização Da Tarefa (ID:
                      {dadosAtualCard.id_demanda})
                    </strong>
                  </div>
                  <div className="text-black-2 text-lg">Informações</div>
                  <div className="text-black text-[14px] flex flex-col gap-5">
                    <div>
                      Usuario Responsável: {dadosAtualCard.nome_usuario}
                    </div>
                    <div>
                      Loja:{" "}
                      {dadosAtualCard.loja_demanda
                        ? lojasOptions.find(
                            (e: any) => e.id_loja == dadosAtualCard.loja_demanda
                          )?.nome_loja
                        : "Sem Loja"}
                    </div>
                    <div>
                      Negócio:{" "}
                      {dadosAtualCard.nome_negocio_coleta == null
                        ? "Sem Negócio"
                        : dadosAtualCard.nome_negocio_coleta}
                    </div>
                    <div>Prioridade: {dadosAtualCard.nome_prioridade}</div>
                    {dadosAtualCard.observacoes_atendimento && (
                      <div>
                        Observações: {dadosAtualCard.observacoes_atendimento}
                      </div>
                    )}
                    {dadosAtualCard.anexo_atendimento && (
                      <>
                        <div> Anexo Atendimento:</div>
                        <img src={anexoAtendimento} alt="Imagem Atendimento" />
                      </>
                    )}
                    {dadosAtualCard.nome_problema_n_resolvido && (
                      <div>
                        Problema Não Resolvido :{" "}
                        {dadosAtualCard.nome_problema_n_resolvido}{" "}
                      </div>
                    )}
                    {dadosAtualCard.anexo_demanda && (
                      <>
                        <div> Anexo Tarefa:</div>
                        <img src={anexoTarefa} alt="Imagem Tarefa" />
                      </>
                    )}
                  </div>

                  <hr />
                </div>
              </ModalComponente>

              <ModalComponente
                hasForm={false}
                defaultW="300px"
                opened={modalTrocaResponsavel}
                hasSaveButton={false}
                onClose={() => setModalTrocaResponsavel(false)}
                header={`Trocar Responsável (ID:${dadosAtualCard.id_demanda})`}
              >
                <div className="flex flex-col justify-center items-center p-5">
                  <InputSelectComponent
                    skipEffect
                    label="Responsável"
                    name="responsável"
                    width="xl:w-[250px]"
                    options={[
                      ...optionsUsuario
                        .filter((usuario: any) =>
                          selectedLoja?.some((loja: any) =>
                            usuario.loja_usuario?.split(",").includes(loja)
                          )
                        )
                        .map((e: any) => ({
                          value: e.id_usuario,
                          label: e.nome_usuario,
                        })),
                    ]}
                    defaultValue={dadosAtualCard.responsavel_demanda}
                    onChange={(e: any) => {
                      const dadosToChange = {
                        status_demanda: 1,
                        id_demanda: dadosAtualCard.id_demanda,
                        responsavel_demanda: e.value,
                      };
                      editarDemanda(dadosToChange).then(() => {
                        listarTarefasFunction(dadosForm);
                        setModalTrocaResponsavel(false);
                      });
                    }}
                  />
                </div>
              </ModalComponente>
              <ModalComponente
                hasForm={false}
                defaultW="700px"
                opened={modalAprovar}
                hasSaveButton={false}
                onClose={() => setModalAprovar(false)}
                header={`Conclusão da tarefa (ID:${dadosAtualCard.id_demanda})`}
              >
                <div className="flex p-5">
                  <form
                    onSubmit={handleConcluir(onSubmitConcluir)}
                    className="flex flex-col gap-3"
                  >
                    <InputSelectComponent
                      name="problema"
                      label="Problema Resolvido"
                      formulario={formConcluir}
                      skipEffect
                      width="xl:w-[350px]"
                      options={[
                        { label: "Sim", value: "1" },
                        { label: "Não", value: "0" },
                      ]}
                      onChange={(e: any) => setProblemaValue(e.value)}
                    />
                    {problemaValue == "0" && (
                      <InputSelectComponent
                        skipEffect
                        formulario={formConcluir}
                        label="Motivo Não Resolvido"
                        name="motivo_naoResolvido_demanda"
                        // width="xl:w-[250px]"
                        options={problemas.map((e: any) => ({
                          value: e.id_problema_n_resolvido,
                          label: e.nome_problema_n_resolvido,
                        }))}
                      />
                    )}
                    <InputSelectComponent
                      name="gerar_manutencao_corretiva"
                      label="Gerar Negócio de Manutenção Corretiva?"
                      formulario={formConcluir}
                      width="xl:w-[350px]"
                      options={[
                        { label: "Sim", value: "1" },
                        { label: "Não", value: "0" },
                      ]}
                      skipEffect
                      // onChange={(e: any) => setProblemaValue(e.value)}
                    />
                    <InputGroup>
                      <Input
                        name="observacao_demanda"
                        label="Observação"
                        type="textarea"
                        formulario={formConcluir}
                      />
                    </InputGroup>
                    <div className="flex justify-end">
                      <Button loading={isLoading} className="mt-3">
                        Concluir
                      </Button>
                    </div>
                  </form>
                </div>
              </ModalComponente>
              <ModalComponente
                hasForm={false}
                defaultW="700px"
                opened={modalAnexo}
                hasSaveButton={false}
                onClose={() => setModalAnexo(false)}
                header={`Adicionar Anexo a Tarefa (ID:${dadosAtualCard.id_demanda})`}
              >
                <div className="flex p-2">
                  <Input
                    label="Anexo"
                    onRemoveFile={() => {
                      setAnexoTarefaBase64(""),
                        setAnexoTarefaFile(null),
                        form.setValue("anexo_demanda" as never, "" as never);
                    }}
                    name="anexo_demanda"
                    width={"xl:w-[600px]"}
                    type="file"
                    accept="image/*"
                    onInputProp={(event: any) => {
                      const inputElement = event.target as HTMLInputElement;

                      if (inputElement.files && inputElement.files.length > 0) {
                        const file = inputElement.files[0];
                        const reader = new FileReader();
                        reader.onloadend = () => {
                          const base64String = reader.result as string;

                          setAnexoTarefaFile(file);
                          setAnexoTarefaBase64(base64String);
                        };

                        reader.readAsDataURL(file);
                      }
                      return 1;
                    }}
                    defaultValue={dadosAtualCard && anexoTarefaBase64}
                  />
                </div>
                <div className="flex justify-end">
                  <Button
                    loading={isLoading}
                    onClick={() => handleEnviarAnexo()}
                    className="mt-3"
                  >
                    Enviar
                  </Button>
                </div>
              </ModalComponente>
            </>
          )}
          {}
        </div>
      </Container>
    </>
  );
};

export default Tarefas;