import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { Tooltip } from "@mui/material";
import { Info } from "lucide-react";

const NoticeClientTab = ({ form, defaultValues }: any) => {
  return (
    <div>
      <InputGroup className="grid grid-cols-2">
        <InputSelectComponent
          name="lembrar_cliente_vencimento_parcelas_parametro"
          label={
            <span className="flex items-center gap-1">
              Notificar o cliente a respeito das parcelas a vencer e vencidas
              <Tooltip
                title={
                  <div className="text-black-2">
                    <div className="text-sm">
                      <div>
                        Este é o modelo de e-mail que será enviado
                        automaticamente ao cliente para lembrá-lo sobre parcelas
                        ainda não pagas.
                      </div>
                      <div>O sistema envia:</div>
                    </div>
                    <ul className="list-disc pl-6 font-medium">
                      <li className="mb-2" style={{ lineHeight: "12px" }}>
                        Lembretes diários nos 6 dias que antecedem o vencimento
                        da parcela.
                      </li>
                      <li className="mb-2" style={{ lineHeight: "12px" }}>
                        Notificações diárias nos 6 dias após o vencimento, enquanto a
                        parcela permanecer em aberto.
                      </li>
                    </ul>
                    {/* {warning(aviso.model)} */}
                    <div className="border border-black p-3 bg-black-2/5">
                      <h2
                        className="mb-[10px] text-center text-title-lg"
                        // style={{
                        //   fontSize: "32px",
                        // }}
                      >
                        Lembrete de Vencimento
                      </h2>
                      <div style={{ lineHeight: "12px" }}>
                        <div>
                          Olá Sr.(a) <strong>$nome_cliente</strong>, viemos
                          lembrá-lo(a) de sua conta que{" "}
                          <strong>{'${vence/venceu}'}</strong>, no valor de{" "}
                          <strong>R$ $valorParcela</strong>, na
                          data $dataVencimento_parcelamento.
                        </div>
                        <br />
                        <div>
                          Qualquer dúvida ou problema para efetuar o pagamento,
                          entre em contato conosco pelo telefone $telefone_loja.
                        </div>
                        <br />
                        <div>
                          Caso o pagamento já tenha sido efetuado, por favor,
                          desconsidere este aviso.
                        </div>
                      </div>
                    </div>
                  </div>
                }
                componentsProps={{
                  tooltip: {
                    sx: {
                      bgcolor: "white",
                      color: "black",
                      fontSize: "0.75rem",
                      fontFamily: "Satoshi",
                      borderRadius: "0.375rem",
                      maxWidth: 900,
                      border: 1,
                      borderColor: "#bdb9b9",
                      p: 1,
                    },
                  },
                }}
                placement="top"
              >
                <button
                  type="button"
                  className="hover:text-primary cursor-pointer p-1 rounded"
                >
                  <Info size={16} />
                </button>
              </Tooltip>
            </span>
          }
          labelSize="mt-3"
          formulario={form}
          options={[
            { label: "Sim", value: "1" },
            { label: "Não", value: "0" },
          ]}
          defaultValue={
            defaultValues &&
            defaultValues["lembrar_cliente_vencimento_parcelas_parametro"]
          }
        />
      </InputGroup>
    </div>
  );
};

export default NoticeClientTab;