import "../../../../style.scss";
import "react-toastify/dist/ReactToastify.css";

import { Button, InputLabel, TextField } from "@mui/material";
import { Card, CardContent, CardHeader, Icon, IconButton } from "@mui/material";
import Menu, { MenuProps } from "@mui/material/Menu";
import React, { useContext, useEffect, useState } from "react";
import { alpha, styled } from "@mui/material/styles";
import {
  clearDeleteEvaluationStatus,
  deleteCandidateEvaluation,
} from "../../../../redux/slices/candidate/deleteCandidateEvaluationSlice";
import { useDispatch, useSelector } from "react-redux";

import Accordion from "@mui/material/Accordion";
import AccordionDetails from "@mui/material/AccordionDetails";
import { AccordionSummary } from "@mui/material";
import { Avatar } from "@mui/material";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import DeleteIcon from "@mui/icons-material/Delete";
import EditIcon from "@mui/icons-material/Edit";
import EvaluateDrawer from "./rightDrawers/evaluateDrawer";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import FormControl from "@mui/material/FormControl";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormLabel from "@mui/material/FormLabel";
import { Grid } from "@mui/material";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemAvatar from "@mui/material/ListItemAvatar";
import ListItemText from "@mui/material/ListItemText";
import MenuItem from "@mui/material/MenuItem";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import Rating from "@mui/material/Rating";
import SelectInterviewersDrawer from "./rightDrawers/SelectInterviewersDrawer";
import Stack from "@mui/material/Stack";
import StarIcon from "@mui/icons-material/Star";
import ThumbDownAltIcon from "@mui/icons-material/ThumbDownAlt";
import ThumbDownOffAltIcon from "@mui/icons-material/ThumbDownOffAlt";
import ThumbUpAltIcon from "@mui/icons-material/ThumbUpAlt";
import ThumbUpOffAltOutlinedIcon from "@mui/icons-material/ThumbUpOffAltOutlined";
import ThumbsUpDownIcon from "@mui/icons-material/ThumbsUpDown";
import ThumbsUpDownOutlinedIcon from "@mui/icons-material/ThumbsUpDownOutlined";
import { Typography } from "@mui/material";
import { candidateEvaluation } from "../../../../redux/slices/candidate/candidatePostEvaluationSlice";
import {
  candidateStageIdsEnum,
  adminStatusIdsEnum,
} from "../../../../common/enum/constants";
import { getEvaluationByEvaluationId } from "../../../../redux/slices/candidate/getEvaluationByEvaluationIdSlice";
import { makeStyles } from "@mui/styles";
import moment from "moment";
import { toast } from "react-toastify";
import { useParams } from "react-router";
import "react-toastify/dist/ReactToastify.css";
import { LanguageContext } from "../../../../context/languageContext";

const EvaluationTab = ({
  candidateEvaluationData,
  id,
  candidateId,
  stageIdArray,
  setEvFlag,
  candidateStagesData,
}) => {
  // const { id, candidateId } = useParams();
  const dispatch = useDispatch();
  const [isOpencard, setIsOpenCard] = useState(false);
  const [cardOpen, setCardOpen] = useState(0);
  const [button, setButton] = useState(false);
  const [canEvaluationData, setCanEvaluationData] = useState([]);
  const [expanded, setExpanded] = React.useState(false);
  const [anchorPop, setAnchorPop] = React.useState(null);
  const [isOpenEvaluate, setIsOpenEvaluate] = useState(false);
  const [isOpenSelect, setIsOpenSelect] = useState(false);
  const [expandedTextfield, setExpandedTextfield] = useState(false);
  const [dropDownOpen, setDropDownOpen] = useState([]);
  const [interviewersAdded, setInterviewersAdded] = useState([]);

  const [message, setMessage] = useState("");
  function handleDropDownToggle(index) {
    setDropDownOpen((prevState) => {
      const updatedState = [...prevState];
      updatedState[index] = !updatedState[index];
      return updatedState;
    });
  }
  const [evaluationOpen, setEvaluationOpen] = useState([]);
  function handleEvaluationToggle(index) {
    setEvaluationOpen((prevState) => {
      const updatedState = [...prevState];
      updatedState[index] = !updatedState[index];
      return updatedState;
    });
  }

  const handleDelete = (evaluationId) => {
    if (evaluationId) {
      dispatch(deleteCandidateEvaluation(evaluationId));
    }
  };
  const deleteData = useSelector(
    (state) => state.deleteCandidateEvaluation?.data
  );
  useEffect(() => {
    if (deleteData?.error == false) {
      toast.success(deleteData?.data);
      dispatch(clearDeleteEvaluationStatus(deleteData));
      setEvFlag(true);
    } else if (deleteData?.error == true) {
      toast.error(deleteData?.data);
      dispatch(clearDeleteEvaluationStatus(deleteData));
    }
  }, [deleteData]);
  const [panelData, setPanelData] = useState({});

  const editHandle = (evaluationId) => {
    if (evaluationId) {
      setButton(true);
      dispatch(getEvaluationByEvaluationId(evaluationId)).then(() =>
        setIsOpenEvaluate(true)
      );
    }
  };
  const editEvaluationData = useSelector(
    (state) => state.getEvaluationByEvaluationId?.data
  );

  const handleTextFieldFocus = () => {
    setExpandedTextfield(true);
  };
  const handleCancel = () => {
    setExpandedTextfield((prevExpandedTextfield) => {
      // Access and use the previous state (prevExpandedTextfield) here
      console.log("Previous expandedTextfield value:", prevExpandedTextfield);
    
      // Update the state based on the previous state
      return false; // Toggle the value, replace with your logic
    });
  };
  const handleTextFieldClick = () => {
    console.log(expandedTextfield,"value of expanded")
    if(expandedTextfield==true){
      console.log("enetered if")

    }else{
      console.log("entered in else",expandedTextfield)
      setExpandedTextfield((prevExpandedTextfield) => {
        // Access and use the previous state (prevExpandedTextfield) here
        console.log("Previous expandedTextfield value:", prevExpandedTextfield);
      
        // Update the state based on the previous state
        return true; // Toggle the value, replace with your logic
      });
    }
  };

  const open1 = Boolean(anchorPop);
  const toggleCard = () => {
    setDropDownOpen(!dropDownOpen);
  };

  const handleChange = (panel) => (event, isExpanded) => {
    setExpanded(isExpanded ? panel : false);
  };

  const toggleDrawerEvaluate = (open) => (event) => {
    setIsOpenEvaluate(open);
    onClose();
  };
  const toggleDrawerSelect = (open) => (event) => {
    setIsOpenSelect(open);
    onClose();
  };

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClickPop = (event) => {
    setAnchorPop(event.currentTarget);
  };
  const onClose = () => {
    setAnchorPop(null);
  };
  const toggleDetails = () => {
    setShowEvalution(!showEvalution);
  };

  const StyledMenu = styled((props) => (
    <Menu
      elevation={0}
      anchorOrigin={{
        vertical: "bottom",
        horizontal: "right",
      }}
      transformOrigin={{
        vertical: "top",
        horizontal: "right",
      }}
      {...props}
    />
  ))(({ theme }) => ({
    "& .MuiPaper-root": {
      borderRadius: 6,
      marginTop: theme.spacing(1),
      minWidth: 180,
      // color:
      //     theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[300],
      boxShadow:
        "rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
      "& .MuiMenu-list": {
        padding: "4px 0",
      },
      "& .MuiMenuItem-root": {
        "& .MuiSvgIcon-root": {
          fontSize: 18,
          // color: theme.palette.text.secondary,
          marginRight: theme.spacing(1.5),
        },
        "&:active": {
          backgroundColor: alpha(
            theme.palette.primary.main,
            theme.palette.action.selectedOpacity
          ),
        },
      },
    },
  }));
  const titleStyle = {
    fontFamily: "poppins",
    fontWeight: "500",
    fontSize: "16px",
    lineHeight: "24px",
  };
  useEffect(() => {
    if (candidateEvaluationData) {
      setCanEvaluationData(candidateEvaluationData?.data);
    }
  }, [candidateEvaluationData]);

  const [quickEvaluation, setQuickEvaluation] = useState("");
  let stageId = 0;
  if (candidateStagesData?.candidateDetails?.jobList?.length) {
    stageId =
      candidateStagesData?.candidateDetails?.jobList[0]?.stageStatus?.id;
  }

  const [selectedValue, setSelectedValue] = useState("");

  const handleIconClick = (value) => {
    setSelectedValue(value);
  };

  const handleRadioChange = (event) => {
    setSelectedValue(event.target.value);
  };

  const handleSubmit = () => {
    const reqParam = {
      candidateId: candidateId,
      id: id,
      params: {
        stageStatusId: stageId,
        skills: [],
        comment: quickEvaluation,
        overallRecommendations: selectedValue,
      },
    };
    dispatch(candidateEvaluation(reqParam));
    handleCancel();
    setQuickEvaluation("");
  };

  function stringToColor(string) {
    let hash = 0;
    let i;

    for (i = 0; i < string.length; i += 1) {
      hash = string.charCodeAt(i) + ((hash << 5) - hash);
    }

    let color = "#";

    for (i = 0; i < 3; i += 1) {
      const value = (hash >> (i * 8)) & 0xff;
      color += `00${value.toString(16)}`.slice(-2);
    }

    return color;
  }

  function stringAvatar(name) {
    const nameParts = name.split(" ");

    const firstName = nameParts[0];
    let lastName = "";

    if (nameParts.length > 1) {
      lastName = nameParts[nameParts.length - 1];
    }

    return {
      sx: {
        // bgcolor: stringToColor(name),
        bgcolor: "#1c2f72",
      },
      children: `${firstName[0].toUpperCase()}${
        lastName ? lastName[0].toUpperCase() : ""
      }`,
    };
  }
  const timeFormat = (timestamp) => {
    const postedOn = moment.utc(timestamp).local();
    const now = moment();
    const duration = moment.duration(now.diff(postedOn));
    const hoursDiff = Math.floor(duration.asHours());
    const minutesDiff = Math.floor(duration.asMinutes()) % 60;
    const daysDiff = Math.floor(duration.asDays());
    let formattedTime = "";
    if (daysDiff >= 1) {
      formattedTime = `${postedOn.format("HH:MM DD/MM/YYYY")}`;
    } else if (hoursDiff >= 1) {
      formattedTime = `${hoursDiff} hour(s) ago`;
    } else if (minutesDiff >= 1) {
      formattedTime = `${minutesDiff} minute(s) ago`;
    } else {
      formattedTime = "just now";
    }

    return formattedTime;
  };
  const { translations } = useContext(LanguageContext);

  return (
    <Container className="evaluation_section addCandidate__container p-0">
      <Typography variant="h6" component="h6" sx={{ mb: 1 }}>
        {translations.typographyText.addQuickEvaluation}
      </Typography>
      <Box className="d-flex flex-row justify-content-between align-items-start">
        <Typography
          variant="section"
          component="section"
          sx={{ width: "100%", mr: 2 }}
        >
          <Accordion className="accordion__evaluation mr-2">
            <AccordionSummary>
              <TextField
                className="add__input__textfield"
                placeholder={translations.textfieldPlaceholder.addEvaluation}
                multiline={expandedTextfield} 
                rows={expandedTextfield ? 4 : 1}
                onClick={handleTextFieldClick}
                // onFocus={() => handleTextFieldFocus(true)}
                // onDoubleClick={() => setExpandedTextfield(false)}
                fullWidth
                // minRows={1}
                value={quickEvaluation}
                onChange={(e) => {
                  setQuickEvaluation(e.target.value);
                }}
                // minRows={multiline ? 3 : null}
              />{" "}
            </AccordionSummary>
            <AccordionDetails>
                {expandedTextfield && (
                  <Grid container className="button__expand">
                    <FormControl>
                      <FormLabel id="demo-radio-buttons-group-label"></FormLabel>
                      <div>
                        <IconButton
                          onClick={() => handleIconClick("Yes")}
                          sx={{
                            color: "green",
                            "&:hover": {
                              backgroundColor: "transparent",
                              color: "green",
                            },
                          }}
                        >
                          {selectedValue === "Yes" ? (
                            <ThumbUpAltIcon />
                          ) : (
                            <ThumbUpOffAltOutlinedIcon
                              sx={{ color: "green" }}
                            />
                          )}
                        </IconButton>
                        <IconButton
                          onClick={() => handleIconClick("No")}
                          sx={{
                            color: "red",
                            "&:hover": {
                              backgroundColor: "transparent",
                              color: "red",
                            },
                          }}
                        >
                          {selectedValue === "No" ? (
                            <ThumbDownAltIcon />
                          ) : (
                            <ThumbDownOffAltIcon sx={{ color: "red" }} />
                          )}
                        </IconButton>
                        <IconButton
                          onClick={() => handleIconClick("Not Sure")}
                          sx={{
                            color: "black",
                            "&:hover": {
                              backgroundColor: "transparent",
                              color: "black",
                            },
                          }}
                        >
                          {selectedValue === "Not Sure" ? (
                            <ThumbsUpDownIcon />
                          ) : (
                            <ThumbsUpDownOutlinedIcon sx={{ color: "black" }} />
                          )}
                        </IconButton>
                      </div>
                    </FormControl>

                    <Grid item className="box__buttons">
                      <Button
                        variant="text"
                        className="cancel__button"
                        onClick={handleCancel}
                      >
                        {translations.buttons.cancel}
                      </Button>
                      <Button variant="contained" onClick={handleSubmit}>
                        {translations.buttons.submit}
                      </Button>
                    </Grid>
                  </Grid>
                )}
            </AccordionDetails>
          </Accordion>
        </Typography>
        <Box>
          <Button
            id="outlined_secondaryBtn"
            variant="contained"
            onClick={handleClickPop}
            className="outlined_secondaryBtn"
            endIcon={
              anchorPop ? (
                <KeyboardArrowUpIcon sx={{ width: "20px" }} />
              ) : (
                <KeyboardArrowDownIcon
                  sx={{ width: "20px" }}
                  onClick={handleClickPop}
                />
              )
            }
            sx={{
              fontSize: "14px",
              fontFamily: "Poppins",
              textTransform: "capitalize",
              width: 450,
              backgroundColor: "#68B0DA !important ",
            }}
          >
            {translations.buttons.evaluateForm}
          </Button>
        </Box>

        <StyledMenu
          anchorEl={anchorPop}
          open={open1}
          onClose={onClose}
          id="evaluation-menu"
          MenuListProps={{
            "aria-labelledby": "outlined_secondaryBtn",
            className: "evaluation-menu upload-menu",
          }}
        >
          <MenuItem
            disabled={
              candidateStagesData?.candidateDetails?.jobList[0]?.adminStatus
                ?.description === "Drop" ||
              candidateStagesData?.candidateDetails?.jobList[0]?.adminStatus
                ?.description === "Yet to Screen" ||
              candidateStagesData?.candidateDetails?.jobList[0]?.adminStatus
                ?.description === "L1 Rejected " ||
              candidateStagesData?.candidateDetails?.jobList[0]?.adminStatus
                ?.description === "L2 Rejected"
            }
            // disabled={stageId==1 || candidateStagesData?.candidateDetails?.jobList[0]?.stageStatus?.id ===13}
            onClick={toggleDrawerEvaluate(true)}
            onClose={onClose}
          >
            <Typography
              variant="h4"
              component="h4"
              onClick={() => setAnchorPop(null)}
            >
              {translations.typographyText.evaluate}
            </Typography>
            {/* <Typography variant="h4" component="h4" onClick={() => setAnchorPop(null)}>Evaluate</Typography> */}
            <Typography variant="p" component="p">
              {" "}
              {translations.typographyText.fillEvaluationCandidate}
            </Typography>
            {/* <Checkbox /> */}
            {/* <Checkbox /> */}
          </MenuItem>

          <MenuItem onClick={toggleDrawerSelect(true)}>
            {/* <Typography variant="h4" component="h4" onClick={() => setAnchorPop(null)}>Send It For Interviewers</Typography> */}
            <Typography
              variant="h4"
              component="h4"
              onClick={() => setAnchorPop(null)}
            >
              {translations.typographyText.sendForInterviewers}
            </Typography>
            <Typography variant="p" component="p">
              {" "}
              {translations.typographyText.requestInterviewers}
            </Typography>
          </MenuItem>
        </StyledMenu>
      </Box>
      <EvaluateDrawer
        setButton={setButton}
        button={button}
        editEvaluationData={editEvaluationData?.data}
        candidateStagesData={candidateStagesData}
        setEvFlag={setEvFlag}
        id={id}
        candidateId={candidateId}
        candidateEvaluationData={candidateEvaluationData}
        isOpen={isOpenEvaluate}
        toggleDrawer={toggleDrawerEvaluate}
      ></EvaluateDrawer>
      {isOpenSelect && (
        <SelectInterviewersDrawer
          isOpen={isOpenSelect}
          toggleDrawer={toggleDrawerSelect}
          setInterviewersAdded={setInterviewersAdded}
        ></SelectInterviewersDrawer>
      )}

      {candidateEvaluationData?.length &&
        candidateEvaluationData?.map((data, index) => {
          return data?.stageId !==
            candidateStageIdsEnum.sourceOfApplications ? (
            <Card className="evaluation__card" key={index}>
              <CardHeader
                className="evaluation__card--header"
                title={data?.stageLevel}
                titleTypographyProps={{ style: titleStyle }}
                action={
                  <IconButton
                    onClick={() => handleDropDownToggle(index)}
                    className="cursor-pointer"
                  >
                    {dropDownOpen[index] ? (
                      <KeyboardArrowUpIcon />
                    ) : (
                      <KeyboardArrowDownIcon />
                    )}
                  </IconButton>
                }
              />
              {dropDownOpen[index] && (
                <CardContent className="py-0">
                  <Card className="score-progress avgScore_card">
                    <CardContent className="pb-3">
                      <Box className="d-flex flex-row justify-content-start align-items-center">
                        <div class="progress-wrapper">
                          <div
                            class="progress"
                            data-percentage={Math.round(
                              data?.averageOverallRating * 20
                            )}
                          >
                            <span class="progress-left">
                              <span class="progress-bar"></span>
                            </span>
                            <span class="progress-right">
                              <span class="progress-bar"></span>
                            </span>
                            <div class="progress-value">
                              <div>
                                {Math.round(data?.averageOverallRating * 20)}%
                              </div>
                            </div>
                          </div>
                        </div>
                        <Typography
                          component="div"
                          variant="div"
                          className="ms-3"
                        >
                          <Typography variant="h5" component="h5">
                            {data?.stageLevel} Score
                          </Typography>
                          <Typography variant="h5" component="h5">
                            {timeFormat(data?.updatedAt)}
                          </Typography>
                        </Typography>
                      </Box>
                    </CardContent>
                  </Card>
                  {/* {setCardOpen(index+1)} */}
                  <List className="listItem_comments">
                    {data?.panel?.map((user, index) => (
                      <ListItem key={index}>
                        <Box className="listItem_comments--profile w-100 justify-content-between d-flex">
                          <Typography
                            variant="div"
                            component="div"
                            className="d-flex align-items-center"
                          >
                            <ListItemAvatar>
                              <Avatar {...stringAvatar(user.commentedBy)} />
                            </ListItemAvatar>
                            <ListItemText className="interviewData">
                              <Typography variant="h5" component="h5">
                                {user.commentedBy}
                              </Typography>
                              <Typography variant="span" component="span">
                                {timeFormat(user.createdAt)}
                              </Typography>
                            </ListItemText>
                            <ListItemText className="twoColumn_row ms-3 d-flex flex-row">
                              {/* <ListItemIcon>
                               <ThumbUpOffAltIcon color="success" />
                           </ListItemIcon> */}
                              <IconButton>
                                {user?.evaluationFlag ? (
                                  user.evaluationFlag === "Yes" ? (
                                    <ThumbUpAltIcon className="green" />
                                  ) : user.evaluationFlag === "No" ? (
                                    <ThumbDownAltIcon className="red" />
                                  ) : (
                                    <ThumbsUpDownIcon className="black" />
                                  )
                                ) : (
                                  " "
                                )}
                              </IconButton>
                              <Stack spacing={1}>
                                <Rating
                                  defaultValue={user?.overallRating}
                                  precision={0.5}
                                  readOnly
                                />
                              </Stack>
                            </ListItemText>
                          </Typography>
                          <Typography variant="div" component="div">
                            <IconButton
                              aria-label="edit"
                              onClick={() => editHandle(user?.evaluationId)}
                            >
                              <EditIcon />
                            </IconButton>
                            <IconButton
                              aria-label="delete"
                              onClick={() => {
                                handleDelete(user?.evaluationId);
                              }}
                            >
                              <DeleteIcon />
                            </IconButton>
                            <Button
                              hidden={!user?.skills?.length}
                              variant="text"
                              onClick={() => handleEvaluationToggle(index)}
                            >
                              View Evaluation
                            </Button>
                          </Typography>
                        </Box>
                        <ListItemText className="listItem_comments--text">
                          {user?.summary}
                        </ListItemText>
                        {user?.skills?.map((skill) => {
                          return (
                            <>
                              {/* {evaluationOpen[index] && ( */}
                              <ListItem sx={{ px: 0 }} key={index}>
                                <ListItemText sx={{ width: "100%" }}>
                                  <Typography className="d-flex justify-content-between align-items-center">
                                    <b>{skill.skillName}</b>(
                                    {skill.skillDescription})
                                    <Box>
                                      <Stack spacing={1}>
                                        <Rating
                                          defaultValue={skill?.skillRating}
                                          precision={0.5}
                                          readOnly
                                        />
                                      </Stack>
                                    </Box>
                                  </Typography>
                                </ListItemText>
                              </ListItem>
                              {/* // )} */}
                            </>
                          );
                        })}
                      </ListItem>
                    ))}
                    <ListItem>
                      <Card className="my-3 accordionCard evaluation_accordion">
                        <CardContent>
                          <Accordion>
                            <AccordionDetails>
                              <Typography
                                component="section"
                                varient="section"
                              ></Typography>
                            </AccordionDetails>
                          </Accordion>
                        </CardContent>
                      </Card>
                    </ListItem>
                  </List>
                </CardContent>
              )}
            </Card>
          ) : (
            <></>
          );
        })}
    </Container>
  );
};
export default EvaluationTab;