import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import ModalComponente from "@/components/Modal/ModalComponente";
import { cadastroNotasCard, listarNotasCard } from "@/requests/CRM/notas";
import { format } from "date-fns";
import { StickyNote } from "lucide-react";
import { useState } from "react";
import { toast } from "react-toastify";

const NotasOnCard = ({
  dadosCard,
  setNotas,
  notas,
  form,
  id_usuario,
  blockEditCard,
}: any) => {
  const [openModalNotas, setOpenModalNotas] = useState<any>();
  const [AllNotes, setAllNotes] = useState<any[]>([]);

  const handleModalNotas = () => {
    const idColeta = dadosCard?.id_coleta_cliente;
    setOpenModalNotas(true);
    listarNotasCard(idColeta).then((res) => {
      setAllNotes(res);
    });
  };
  const cadastroNota = (e: any) => {
    e.preventDefault();

    const { notas } = form.control._formValues;
    if (!notas) return toast.warning("Campo de notas vazio");
    const idCard = dadosCard?.id;
    const coleta_id_nota_kanban = dadosCard?.id_coleta_cliente;
    const data = { notas, idCard, coleta_id_nota_kanban, id_usuario };
    cadastroNotasCard(data);
    setNotas("");
  };
  return (
    <>
      <div className="bg-white rounded-md p-4 text-xs">
        <Input
          onChange={(e) => setNotas(e.target.value)}
          defaultValue={notas}
          id="notas"
          formulario={form}
          disabled={blockEditCard}
          name="notas"
          rows={7}
          type="textarea"
          placeholder="Informe uma Descrição de nota para salvar"
        />
        <div className="flex gap-2 text-sm max-sm:text-xs max-sm:h-9 mt-2 h-fit justify-end w-full ">
          <Button
            type="submit"
            onClick={() => handleModalNotas()}
            className="px-4 bg-primary xl:w-fit w-full py-1"
          >
            Visualizar todas as notas
          </Button>
          {!blockEditCard && (
            <Button
              type="submit"
              onClick={cadastroNota}
              className="px-4 xl:w-fit  w-full py-1"
            >
              Salvar
            </Button>
          )}
        </div>
      </div>
      <ModalComponente
        size="xl"
        className="h-[80vh] max-w-[900px]"
        opened={openModalNotas}
        hasSaveButton={false}
        onClose={() => setOpenModalNotas(false)}
        header="Todas Notas"
      >
        <div className="h-full">
          {AllNotes.length > 0 ? (
            <div className="h-full max-h-[70vh] overflow-auto pr-2">
              <div className="grid gap-3">
                {AllNotes.map((nota: any, index: number) => {
                  const date = new Date(nota.datahora_log_kanban);
                  const dateFormat = format(date, "dd/MM HH:mm:ss");

                  const classNameSpans = "text-black text-base";
                  return (
                    <div
                      key={index}
                      className="flex items-start gap-4 rounded-lg border border-stroke bg-white p-4 shadow-sm"
                    >
                      <div className="bg-primary/90 rounded-md p-3 flex items-center justify-center">
                        <StickyNote size={28} color="white" />
                      </div>
                      <div className="flex flex-col w-full">
                        <div className="flex flex-wrap items-center justify-between gap-2 pb-2">
                          <span className={`${classNameSpans} font-medium`}>
                            {nota.nome_usuario}
                          </span>
                          <span
                            className={`${classNameSpans} text-sm text-black/60`}
                          >
                            {dateFormat}
                          </span>
                        </div>
                        <span
                          className={`${classNameSpans} whitespace-break-spaces`}
                        >
                          <b>Descrição:</b> {nota.descricao_log_kanban}
                        </span>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          ) : (
            <div className="flex h-full flex-col items-center justify-center text-center text-sm text-black/70">
              Nenhuma nota foi feita!
            </div>
          )}
        </div>
      </ModalComponente>
    </>
  );
};

export default NotasOnCard;