import React, { useState } from "react";
import styled from "styled-components";
import ArrowDown from "./assets/arrowDown";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const Relevant = ({ data, student_text, hideScore }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <Container>
      <Header>
        <h2 className={data?.Evaluation === "Not Relevant" ? "error" : ""}>
          {data?.Evaluation}
        </h2>
        {!hideScore && (
          <p>
            {findText("Points:")}
            <span>{data?.Point || 0}</span>
          </p>
        )}
      </Header>
      <Dropdown
        label={findText("Feedback:")}
        isFeedback
        text={data?.Feedback}
      />
      {student_text && (
        <Dropdown label={findText("Student essay")} text={student_text} />
      )}
    </Container>
  );
};
export default Relevant;
const Dropdown = ({ isFeedback, text, label }) => {
  const { findText } = useTranslation(wordStore);
  const [toggle, setToggle] = useState(true);
  return (
    <DropdownContainer
      className={findText("{arg1}", {
        arg1: isFeedback ? "feedback" : undefined,
      })}
      onClick={() => {
        text && setToggle(!toggle);
      }}
    >
      <div
        className={findText("dd_header {arg1}", {
          arg1: toggle ? "toggle" : "",
        })}
      >
        <p>{label}</p> <ArrowDown />
      </div>
      {toggle && text && (
        <div className="dd_content">
          <p>{text}</p>
        </div>
      )}
    </DropdownContainer>
  );
};
const Container = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
`;
const Header = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  h2 {
    color: #00c2c2;
    font-size: 24px;
    font-weight: 600;
    &.error {
      color: #f95454;
    }
  }
  p {
    border-radius: 10px;
    height: 40px;
    width: 140px;
    background: #e5f9f9;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
    color: #636666;
    font-size: 16px;
    span {
      color: #00c2c2;
      font-size: 20px;
      font-weight: 700;
    }
  }
`;
const DropdownContainer = styled.div`
  &.feedback {
    .dd_header {
      background: #e8fafa;
      p {
        color: #00c2c2;
      }
    }
  }
  .dd_header {
    border-radius: 10px;
    background: #f5f7f7;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    cursor: pointer;
    p {
      font-size: 16px;
      font-weight: 500;
      color: #636666;
    }
    svg {
      transform: rotateX(180deg);
    }

    &.toggle {
      svg {
        transform: rotateX(0deg);
      }
    }
  }

  .dd_content {
    padding-top: 16px;
    p {
      color: #7b7b7b;
      font-size: 16px;
      line-height: 29.046px;
    }
  }
`;
