import React from "react";
import styled from "styled-components";

import { faTimes } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { useTranslation } from "react-i18next";

const Overlay = styled.div`
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(4px);
`;

const DialogCard = styled.div`
  position: relative;
  width: min(100%, 520px);
  padding: 28px 28px 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(177, 99, 255, 0.16);
  box-shadow: 0 26px 48px rgba(48, 55, 85, 0.12);
  text-align: center;
`;

const CloseButton = styled.button`
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #b2b3c1;
  cursor: pointer;
`;

const FinishedSectionTitle = styled.div`
  font-family: Montserrat;
  font-style: normal;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.04em;
  color: #000087;
  font-size: ${({ repository }) =>
    repository === "frontMulti" ? "26px" : "22px"};
`;

const FinishedSectionMessage = styled.div`
  margin-top: 14px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: #303755;
  font-size: ${({ repository }) =>
    repository === "frontMulti" ? "18px" : "15px"};
`;

const CheckRow = styled.label`
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #666666;
  cursor: pointer;
  font-size: ${({ repository }) =>
    repository === "frontMulti" ? "18px" : "15px"};
`;

const CheckBox = styled.input`
  width: 16px;
  height: 16px;
  margin: 0;
`;

export const FinishSecondEcgComponent = ({
  setContinuesecondtocomments,
  setSecondcheck,
  repository,
}) => {
  const { t } = useTranslation("global");

  const handleChange = async (event) => {
    if (event.target.checked) {
      setSecondcheck(true);
    }
  };

  return (
    <Overlay>
      <DialogCard>
        <CloseButton
          type="button"
          onClick={() => {
            setContinuesecondtocomments(true);
          }}
        >
          <FontAwesomeIcon icon={faTimes} />
        </CloseButton>

        <FinishedSectionTitle repository={repository}>
          {t("finishsecondEcgDialog.title")}
        </FinishedSectionTitle>

        <FinishedSectionMessage repository={repository}>
          {t("finishsecondEcgDialog.message")}
        </FinishedSectionMessage>

        <CheckRow
          htmlFor="dont_show_ecg_1finish"
          repository={repository}
        >
          <CheckBox
            value="No mostrar"
            onChange={handleChange}
            type="checkbox"
            id="dont_show_ecg_1finish"
            name="option"
          />
          {t("finishsecondEcgDialog.check")}
        </CheckRow>
      </DialogCard>
    </Overlay>
  );
};