import React, { useEffect, useState } from "react";
import { CloseIcon } from "../../../../header/assets/svg/close";
import styled from "styled-components";
import Radio from "../radio";
import ButtonComponent from "../../../../button";
import useTranslation from "../../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../../mc/wordStore.json";
const GradingModal = ({
  aiValue,
  onClose,
  setScore,
  noAi,
  defaultScore,
  suggestionValue,
  showAIScore,
}) => {
  const { findText } = useTranslation(wordStore);
  const [selected, setSelected] = useState("manually");
  const [value, setValue] = useState(defaultScore || "");
  const numberValue = parseFloat(value || 0);
  const isNumbter = parseFloat(aiValue) || 0;
  const isSuggestionNumber = parseFloat(suggestionValue) || 0;
  const handleSetValue = () => {
    setScore?.({
      score_method:
        selected === 'manually' || selected === 'suggest' ? 'MANUAL' : 'AI',
      score:
        selected === 'manually'
          ? numberValue
          : selected === 'suggest'
            ? isSuggestionNumber
            : isNumbter,
    });
  };
  return (
    <Container>
      <Wrapper>
        <span onClick={onClose}>
          <CloseIcon />
        </span>
        <Content>
          <TopSection>
            <h3>{findText("Instructor’s grading")}</h3>
            <ul className="check_wrapper">
              <>
                {showAIScore && (
                  <li
                    onClick={() => {
                      setSelected('ai');
                    }}
                  >
                    <Radio
                      checked={selected === "ai"}
                      defaultBorderColor={findText("#C6CCCC")}
                    />
                    {findText("Use AI grade")}
                  </li>
                )}
                {noAi && (
                  <li
                    onClick={() => {
                      setSelected('suggest');
                    }}
                  >
                    <Radio
                      checked={selected === "suggest"}
                      defaultBorderColor={findText("#C6CCCC")}
                    />
                    {findText("Use system grade")}
                  </li>
                )}
              </>

              <li
                onClick={() => {
                  setSelected('manually');
                }}
              >
                <Radio
                  checked={selected === "manually"}
                  defaultBorderColor={findText("#C6CCCC")}
                />
                {findText("Grade manually")}
              </li>
            </ul>
            <div className="value_section">
              <p className="label">{findText("Grade")}</p>
              {selected === "ai" && <p className="ai_value">{aiValue}</p>}
              {selected === "suggest" && (
                <p className="ai_value">{suggestionValue}</p>
              )}
              {selected === 'manually' && (
                <input
                  type="text"
                  value={value}
                  onChange={(e) => {
                    const inputValue = e.target.value;
                    const onlyOneDot = inputValue
                      .replace(/(\..*)\./g, '$1')
                      .replace(/[^\d.]/g, '');
                    setValue(onlyOneDot);
                  }}
                />
              )}
            </div>
          </TopSection>
          <ButtonComponent
            text={findText("Save score")}
            // disabled={disable}
            onClick={handleSetValue}
          />
        </Content>
      </Wrapper>
    </Container>
  );
};
export default GradingModal;
const Container = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.15);
`;
const Wrapper = styled.div`
  width: 396px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  span {
    display: inline-flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    background: #fff;
    svg {
      transform: scale(0.8);
    }
  }
`;
const Content = styled.div`
  border-radius: 30px;
  width: 100%;
  background: #fff;
  padding: 43px 46px 55px;
  display: flex;
  flex-direction: column;
  button {
    box-shadow: 0px 10px 20px 0px rgba(254, 191, 16, 0.25);
  }
`;
const TopSection = styled.div`
  margin-bottom: 120px;
  h3 {
    color: #313333;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
  }
  .check_wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: 15px;
    border-bottom: 1px solid #dfe5e5;
    margin-bottom: 15px;

    li {
      display: flex;
      align-items: center;
      gap: 4px;

      color: #7c8080;
      font-size: 14px;
      cursor: pointer;
    }
  }

  .value_section {
    .label {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 7px;
    }
    .ai_value {
      border-radius: 12px;
      background: #e5f9f9;
      display: flex;
      align-items: center;
      padding: 0 20px;
      height: 40px;
      width: 100%;
      color: #00c2c2;
      font-size: 16px;
    }
    input {
      border-radius: 12px;
      border: 1px solid #949999;
      padding: 0 20px;
      height: 40px;
      color: #4a4d4d;
      width: 100%;
      font-size: 16px;
    }
  }
`;
