import React, { useEffect, useState } from "react";
import styled from "styled-components";
import CloseIcon from "../../../../assets/svg/closeIcon";
import {
  DropDownComponent as Dropdown,
  Radio,
  ButtonComponent as Button,
  InputComponent,
} from "l-min-components/src/components";
import useTranslation from "../../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../../mc/wordStore.json";
const GradingModal = ({
  close,
  hasRadio,
  dataToSubmit,
  setDataToSubmit,
  handleSave,
  gradeQuestionData,
  AIGradeScore,
  findText,
  instructorScore,
  matchPair,
}) => {
  const [active, setActive] = useState('AI');
  const [aiScore, setAiScore] = useState(AIGradeScore ?? 0);
  const [options, setOptions] = useState([]);
  const handleOptionChange = (newValue) => {
    setActive(newValue);
    // make it so that score is removed when manual is selected, so that AI score isn't maintained
    if (newValue === "MANUAL") {
      setDataToSubmit({
        score_method: newValue,
        score: instructorScore,
      });
    } else {
      setDataToSubmit({
        score_method: newValue,
        score: Number(aiScore) || Number(matchPair),
      });
    }
  };
  useEffect(() => {
    setAiScore(AIGradeScore);

    // show AI grade option when there's AI data
    if (AIGradeScore || matchPair > -1) {
      setActive('AI');
      setOptions([
        {
          label:
            matchPair < 0 || typeof matchPair !== "number"
              ? "Use AI grade"
              : "Use system grade",
          value: "AI",
        },
        {
          label: "Grade manually",
          value: "MANUAL",
        },
      ]);
      setDataToSubmit({
        score_method: 'AI',
        score: matchPair > -1 ? matchPair : AIGradeScore,
      });
    } else {
      setActive('MANUAL');
      setOptions([
        {
          label: "Grade manually",
          value: "MANUAL",
        },
      ]);
      setDataToSubmit({
        score_method: "MANUAL",
        score: instructorScore,
      });
    }
  }, []);

  //

  //close modal when grade is saved
  useEffect(() => {
    if (gradeQuestionData?.data) {
      close();
    }
  }, [gradeQuestionData?.data]);
  console.log(dataToSubmit, "DATA");
  return (
    <Modal>
      <Container>
        <span onClick={close}>
          <CloseIcon />
        </span>
        <Content>
          <h2>{findText("Instructor's grading")}</h2>
          <Form>
            {hasRadio && (
              <div className="evaluate_radio_select">
                <Radio
                  options={options && options}
                  color="#FEBF10"
                  defaultValue={active}
                  onChange={handleOptionChange}
                  key={active}
                />
              </div>
            )}

            <div className="evaluate_dropdown_select">
              <p>{findText('Grade')}</p>

              {active === 'MANUAL' && (
                <InputComponent
                  min={0}
                  inputType={findText("number")}
                  value={dataToSubmit?.score}
                  label={''}
                  onChange={(e) =>
                    setDataToSubmit({
                      score_method: active,
                      score:
                        e.target.value === '' ? '' : Number(e.target.value),
                    })
                  }
                />
              )}
            </div>

            {active === 'AI' && (
              <span className="edit_score">
                {' '}
                {matchPair > -1 ? matchPair : aiScore}%{' '}
              </span>
            )}

            <div onClick={handleSave}>
              <Button
                text={findText('Save score')}
                styles={{
                  boxShadow: '0px 10px 20px 0px rgba(254, 191, 16, 0.25)',
                  marginTop: '94px',
                  width: '100%',
                }}
                disabled={
                  gradeQuestionData?.loading ||
                  dataToSubmit?.score > 100 ||
                  dataToSubmit?.score < 0 ||
                  typeof dataToSubmit?.score === 'string' ||
                  typeof dataToSubmit?.score === 'undefined'
                }
              />
            </div>
          </Form>
        </Content>
      </Container>
    </Modal>
  );
};
export default GradingModal;
const Modal = styled.div`
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.15);
`;
const Container = styled.div`
  width: 430px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  > span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
  }
`;
const Content = styled.div`
  padding: 45px 50px;
  margin-top: 8px;
  width: 100%;
  border-radius: 40px;
  background-color: #fff;
  h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
    color: #313333;
  }
`;
const Form = styled.form`
  h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 7px;
  }

  .evaluate_dropdown_select {
    padding: 0 0 15px;
  }

  .edit_score {
    color: #00c2c2;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.32px;
    background-color: #e5f9f9;
    border-radius: 12px;
    padding: 9px 15px;
    display: inline-block;
    margin-top: 15px;
    width: 100%;
  }

  .evaluate_radio_select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 15px;
    border-bottom: 1px solid #dfe5e5;
    margin-bottom: 15px;
    h3 {
      margin: 0;
    }
    label {
      span:last-child {
        font-size: 14px;
      }
      span {
        color: #7c8080;
      }
    }
  }

  .dropdown {
    > div {
      border: 1px solid #949999;
      > p {
        color: #adb2b2;
      }
      > svg {
        path {
          stroke: #7c8080;
        }
      }
    }
    ul {
      left: 0;
      right: 0;
      padding: 0;
      top: 40px;
      z-index: 30;
      border-radius: 10px;
      border: 1px solid #c6cccc;
      background: #fff;
      overflow-y: auto;
      li {
        padding: 10px 20px;
        margin: 0;
        background-color: white;
        &:hover {
          span {
            color: white;
          }
          background: rgb(0, 194, 194);
        }
      }
    }
  }
`;
