import React, { FC, useState } from "react";
import Carousel from "react-material-ui-carousel";
import { CorouselProps, FacesInterface, ItemInterface } from "./carousel.types";
import { Icons } from "../Icons";
import Box from "@mui/material/Box";
import Modal from "@mui/material/Modal";
import { Checkbox } from "../Checkbox";
import { useLocale } from "../../hooks/useLocale";
import { CustomizedTooltips } from "../Tooltip";
import StarOutlineRoundedIcon from "@mui/icons-material/StarOutlineRounded";
import DeleteForeverRoundedIcon from '@mui/icons-material/DeleteForeverRounded';
export const CarouselComp: FC<CorouselProps> = ({
  expandImage,
  item,
  setSelected,
  selected,
  setSelectedFavorite,
  selectedFavorite,
  onClickDelete,
}) => {
  const [openImg, setOpenImg] = useState(false);
  const [images, setImages] = useState<FacesInterface[]>([]);
  const { driverID, faces } = item;

  const isChecked = selected?.find((sel: any) => sel?.driverID === driverID);
  const dropItem = () => {
    setSelected &&
      setSelected(
        selected &&
          selected?.filter(
            (selec: ItemInterface) => selec?.driverID !== driverID
          )
      );
  };
  const addItem = () => {
    const newItem: any = [...selected, { ...item }];
    setSelected && setSelected(newItem);
  };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      }}>
      <Carousel
        navButtonsAlwaysVisible={faces?.length > 1 ? true : false}
        navButtonsAlwaysInvisible={faces?.length <= 1 ? true : false}
        fullHeightHover={false}
        animation="slide"
        autoPlay={false}
        sx={{ width: "100%", height: "296px" }}>
        {faces.map((face: FacesInterface) => (
          <Content
            expandImage={expandImage}
            key={face?.faceID}
            faceId={face?.faceID}
            url={face?.url}
            setOpenImg={setOpenImg}
            onClick={() => setImages(faces)}
            setSelectedFavorite={setSelectedFavorite}
            selectedFavorite={selectedFavorite}
            onClickDelete={onClickDelete && onClickDelete}
            heigth="270px"
          />
        ))}
      </Carousel>
      {setSelected && (
        <div
          style={{
            width: "100%",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}>
          <LinkedUnlinked
            isLinked={item?.tspDriver ? true : false}
            driverName={item?.driverName}
          />
          <Checkbox
            checked={isChecked}
            label=""
            onChange={() => {}}
            onClick={() => {
              if (isChecked) {
                dropItem();
              } else {
                addItem();
              }
            }}
          />
        </div>
      )}
      <ModalImg
        openImg={openImg}
        setOpenImg={setOpenImg}
        imgs={images}
        setSelectedFavorite={setSelectedFavorite}
        selectedFavorite={selectedFavorite}
      />
    </div>
  );
};

export const LinkedUnlinked = ({ isLinked, driverName }: any) => {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        fontWeight: "600",
        paddingLeft: "10px",
      }}>
      <p
        style={{
          color: " rgb(114, 114, 114)",
          fontSize: "14px",
          lineHeight: "19px",
        }}>
        {useLocale("assigned_to")}
      </p>
      <p style={{ marginLeft: "10px" }}>
        {isLinked ? driverName : useLocale("unlinked")}
      </p>
    </div>
  );
};

export const Content = ({
  expandImage,
  url,
  setOpenImg,
  onClick,
  faceId,
  sizeImg,
  setSelectedFavorite,
  selectedFavorite,
  heigth,
  onClickDelete,
}: any) => {
  const isFavorite = selectedFavorite === url ? true : false;

  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "column",
      }}>
      <img
        style={{ width: sizeImg ? sizeImg : "100%", height: heigth }}
        src={url}
        alt={faceId}
      />
      {expandImage && (
        <div
          style={{
            position: "absolute",
            cursor: "pointer",
            color: "white",
            fontSize: "50px",
          }}
          onClick={() => {
            onClick && onClick();
            setOpenImg(true);
          }}>
          <Icons size="inherit" name="search" />
        </div>
      )}
      {setSelectedFavorite && (
        <div
          style={{
            position: "absolute",
            cursor: "pointer",
            fontSize: "35px",
            top: "5px",
            right: "5px",
            zIndex: 10,
          }}
          onClick={() => {
            if (isFavorite) {
              setSelectedFavorite && setSelectedFavorite("");
            } else {
              setSelectedFavorite && setSelectedFavorite(url);
            }
          }}>
          <CustomizedTooltips
            placement="left"
            title={useLocale("select_temp_url")}>
            {isFavorite ? (
              <Icons color="yellow" size="inherit" name="starOutlineRoundedIcon" />
            ) : (
              <StarOutlineRoundedIcon
                fontSize="inherit"
                sx={{ color: "black" }}
              />
            )}
          </CustomizedTooltips>
        </div>
      )}
      {onClickDelete && !setSelectedFavorite && (
        <div
          style={{
            position: "absolute",
            cursor: "pointer",
            fontSize: "35px",
            top: "5px",
            right: "5px",
            zIndex: 10,
          }}
          onClick={() => onClickDelete && onClickDelete(faceId)}>

          <CustomizedTooltips
            placement="left"
            title={useLocale("faces_detele")}>
              <DeleteForeverRoundedIcon sx={{color: "#c63737"}} fontSize="inherit" />
          </CustomizedTooltips>
        </div>
      )}
    </div>
  );
};

export const ModalImg = ({
  openImg,
  setOpenImg,
  imgs,
  setSelectedFavorite,
  selectedFavorite,
}: any) => {
  const handleClose = () => setOpenImg(false);
  return (
    <div>
      <Modal open={openImg} onClose={handleClose}>
        <Box>
          <div
            style={{
              position: "absolute",
              right: "5px",
            }}>
            <Icons
              size="large"
              name="close"
              style={{ cursor: "pointer" }}
              onClick={(e) => {
                e.preventDefault();
                handleClose();
              }}
            />
          </div>
          <div
            style={{
              position: "absolute",
              left: "50%",
              transform: "translate(-50%, 0)",
              width: "60%",
              top: "15px",
              bottom: "30px",
            }}>
            <Carousel
              fullHeightHover={false}
              navButtonsAlwaysVisible={imgs?.length > 1 ? true : false}
              navButtonsAlwaysInvisible={imgs?.length <= 1 ? true : false}
              autoPlay={false}
              animation="slide">
              {imgs &&
                imgs?.map((item: any, i: any) => (
                  <Content
                    // sizeImg="70%"
                    heigth="95vh"
                    key={i}
                    url={item?.url}
                    setOpenImg={setOpenImg}
                    setSelectedFavorite={setSelectedFavorite}
                    selectedFavorite={selectedFavorite}
                  />
                ))}
            </Carousel>
          </div>
        </Box>
      </Modal>
    </div>
  );
};
