import SweetAlertConfirmacao from "@/components/Modal/SweetAlertConfirm";
import { editarDemanda } from "@/requests/CRUD/Demandas/editarDemanda";
import { FormatFields } from "@/utils";
import { parseISO } from "date-fns";
import { useEffect, useState } from "react";
import { FaArrowAltCircleRight } from "react-icons/fa";
import { FaArrowUpLong } from "react-icons/fa6";
import { IoIosCheckmarkCircle } from "react-icons/io";
import { MdChangeCircle } from "react-icons/md";

export default function ListaStatusTarefa({
  setDadosAtualCard,
  objStatusTarefa,
  setModalTrocaResponsavel,
  setModalAprovar,
  listarTarefasFunction,
  dadosForm,
}: any) {
  const [ordenacao, setOrdenacao] = useState(
    ["0", "1"]?.includes(objStatusTarefa?.value) ? "dias_prioridade_asc" : ""
  );
  const [listaDemandas, setListaDemandas] = useState<any[]>([]);
  const [keyAtualizacao, setKeyAtualizacao] = useState(0);

  useEffect(() => {
    const demandas = objStatusTarefa.state;

    const demandasOrdenadas = demandas
      ?.sort((a: any, b: any) => {
        new Date(a?.previsao_cham) < new Date(b?.previsao_cham);
      })
      ?.sort((a: any, b: any) => {
        if (ordenacao == "dias_prioridade_asc") {
          return Number(a.dias_prioridade) - Number(b.dias_prioridade);
          // if (Number(a.dias_prioridade) < Number(b.dias_prioridade)) {
          //   return -1;
          // } else if (Number(a.dias_prioridade) > Number(b.dias_prioridade)) {
          //   return 1;
          // }
        } else if (ordenacao == "dias_prioridade_desc") {
          return Number(b.dias_prioridade) - Number(a.dias_prioridade);
          // if (Number(a.dias_prioridade) > Number(b.dias_prioridade)) {
          //   return -1;
          // } else if (Number(a.dias_prioridade) < Number(b.dias_prioridade)) {
          //   return 1;
          // }
        }

        return 0;
      });

    setListaDemandas(demandasOrdenadas);
    setKeyAtualizacao((prev) => prev + 1);
  }, [objStatusTarefa.state, ordenacao]);

  return (
    <div
      className="bg-stroke dark:bg-black bg-opacity-40 px-4 rounded-xl h-[500px] overflow-auto"
      style={{
        border: "3px solid " + `rgba(${108}, ${115}, ${149}, 0.2)`,
        // height: "calc(96vh)",
      }}
      key={keyAtualizacao}
    >
      <div
        className={`flex flex-row justify-between text-black dark:text-white border-b-2 border-${objStatusTarefa.cor} text-sm mt-2 p-2 px-4 items-center rounded-md`}
        style={{
          backgroundColor: `rgba(0,0,0,0.08)`,
        }}
      >
        <div className={`flex flex-row gap-2 items-center`}>
          <strong>{objStatusTarefa.nome}</strong>
          <div
            className="bg-white w-4 h-4 rounded-full text-center text-[10px] flex justify-center items-center"
            onClick={() => {
              console.log(
                objStatusTarefa.state
                  ?.sort((a: any, b: any) => {
                    new Date(a?.previsao_cham) < new Date(b?.previsao_cham);
                  })
                  ?.sort((a: any, b: any) => {
                    if (ordenacao == "dias_prioridade_desc") {
                      return (
                        Number(a.dias_prioridade) - Number(b.dias_prioridade)
                      );
                      // if (Number(a.dias_prioridade) < Number(b.dias_prioridade)) {
                      //   return -1;
                      // } else if (Number(a.dias_prioridade) > Number(b.dias_prioridade)) {
                      //   return 1;
                      // }
                    } else if (ordenacao == "dias_prioridade_asc") {
                      return (
                        Number(b.dias_prioridade) - Number(a.dias_prioridade)
                      );
                      // if (Number(a.dias_prioridade) > Number(b.dias_prioridade)) {
                      //   return -1;
                      // } else if (Number(a.dias_prioridade) < Number(b.dias_prioridade)) {
                      //   return 1;
                      // }
                    }

                    return 0;
                  })
              );
            }}
          >
            <strong className="text-black">{listaDemandas.length}</strong>
          </div>
        </div>
        <div>
          <div
            className="bg-white rounded p-1 flex flex-row gap-1 items-center cursor-pointer select-none"
            onClick={() => {
              setOrdenacao((prev) =>
                prev == ""
                  ? "dias_prioridade_asc"
                  : prev == "dias_prioridade_asc"
                    ? "dias_prioridade_desc"
                    : ""
              );
            }}
          >
            <div>Prioridade</div>
            <div
              className={`transition-all ${ordenacao == "dias_prioridade_desc" && "rotate-180"} ${
                !["dias_prioridade_asc", "dias_prioridade_desc"].includes(
                  ordenacao
                ) && "text-transparent"
              }`}
            >
              <FaArrowUpLong />
              {/* {ordenacao == "dias_prioridade_asc" ? (
              <FaArrowUpLong />
            ) : (
              <FaArrowDownLong />
            )} */}
            </div>
          </div>
        </div>
      </div>
      <div className="h-[85%] pt-2 overflow-hidden">
        <div className="h-[100%] overflow-auto p-2 flex flex-col gap-4 ">
          {listaDemandas.map((res: any, index: any) => {
            const dataBanco = parseISO(res.abertura_cham);
            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)]"
                style={{
                  borderColor: `hsl(${0 + ((240 - 0) * (Math.min(Math.max(res.dias_prioridade, 1), 14) - 1)) / (14 - 1)}, 100%, 50%)`,
                }}
                key={index}
              >
                <div>
                  <div
                    key={res.id_tarefa}
                    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_tarefa}
                      </div>

                      <div className="text-[14px] font-semibold">
                        {res.nome_usuario}
                      </div>
                    </div>
                    <div className="flex flex-row gap-2">
                      <div>Título da Demanda:</div>
                      <div className="font-bold">{res.titulo_tarefa}</div>
                    </div>
                    <div className="flex flex-row justify-between">
                      Nº do chamado: {res.cod_chamado_tarefa}
                    </div>
                    <div className="flex flex-row justify-between">
                      Nome do Cliente: {res.nome_cliente}
                    </div>
                    {res.cod_negocio_cham && (
                      <div>Nº do Projeto: {res.cod_negocio_cham}</div>
                    )}
                    <div className="text-[14px] my-1">
                      Criação: {dataFormatada}
                    </div>
                    <div className="flex flex-row justify-between">
                      <div className="text-[14px]">
                        Prazo:{" "}
                        {res.data_limite_tarefa
                          ? new Date(
                              res.data_limite_tarefa?.split("-")
                            ).toLocaleDateString("pt-br")
                          : ""}
                      </div>
                    </div>
                    {res?.componentesKit?.length > 0 && (
                      <div className="flex flex-col gap-1">
                        {res?.componentesKit
                          ?.filter((item: any) => item?.tipo_item == "9")
                          ?.map((item: any, index_item: number) => (
                            <div
                              className="flex flex-row justify-between fieldset border p-1 rounded"
                              key={index_item}
                            >
                              <div className="font-medium">Módulos</div>
                              <div>
                                <div className="font-bold">
                                  Potência:{" "}
                                  {FormatFields.formatarNumero(
                                    item?.potencia_item
                                  )}
                                  W
                                </div>
                                <div className="font-bold">
                                  Qtd: {item?.qtd}
                                </div>
                              </div>
                            </div>
                          ))}
                        {res?.componentesKit?.filter(
                          (item: any) => item?.tipo_item == "8"
                        )?.length > 0 && (
                          <div>
                            <div className="font-medium">Inversores</div>
                            {res?.componentesKit
                              ?.filter((item: any) => item?.tipo_item == "8")
                              ?.map((item: any, index_item: number) => (
                                <div
                                  className="flex flex-row justify-between fieldset border p-1 rounded"
                                  key={index_item}
                                >
                                  <div className="font-bold">
                                    {item?.descricao}
                                  </div>
                                  <div className="font-bold whitespace-nowrap">
                                    Qtd: {item?.qtd}
                                  </div>
                                </div>
                              ))}
                          </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="py-1">
                      <div
                        className={`px-3 py-1 text-white w-fit rounded-full font-semibold`}
                        style={{
                          backgroundColor: `hsl(${0 + ((240 - 0) * (Math.min(Math.max(res.dias_prioridade, 1), 14) - 1)) / (14 - 1)}, 100%, 50%)`,
                          textShadow: "0px 0px 2px black",
                        }}
                      >
                        Prioridade {res.nome_prioridade}
                      </div>
                    </div>
                    {objStatusTarefa.value == 2 && (
                      <div className="flex items-center gap-2">
                        <div
                          className={`rounded-full bg-${res.problema_resolvido == 0 ? "danger" : "success"} h-2 w-2`}
                        ></div>
                        <span className="text-[14px]">
                          {res.problema_resolvido == 0
                            ? `Não Resolvido${res.coletaRef_cham ? " - Novo Negócio Corretiva" : ""}`
                            : "Resolvido"}
                        </span>
                      </div>
                    )}
                  </div>
                </div>
                {objStatusTarefa.value != 0 && objStatusTarefa.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>
                )}

                {objStatusTarefa.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={() => {
                        console.log(
                          "Eu tentei, mais não consegui, volte aqui mais tarde"
                        );
                        editarDemanda({
                          id_tarefa: res.id_tarefa,
                          status_tarefa: "1",
                        }).then(() => {
                          listarTarefasFunction(dadosForm);
                        });
                      }}
                      className="bg-transparent p-0"
                      tittle="Prosseguir Demanda"
                      html="<span> Confirme se deseja mover a demanda para <strong> Em Progresso </strong> </span>"
                    >
                      <FaArrowAltCircleRight color={"blue"} size={19} />
                    </SweetAlertConfirmacao>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}