import React from "react";
import styled from "styled-components";
import { SocialLink } from "../types";
import Flex from "../../../components/Box/Flex";
import Text from "../../../components/Text/Text";
import Link from "../../../components/Link/Link";
import MoreIcon from "../../../components/Svg/Icons/More";
import ChevronRightIcon from "../../../components/Svg/Icons/ChevronRight";
import ExternalLink from "./ExternalLink";

interface Props {
  list: SocialLink[];
}

const Image = styled.img`
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
`;
const ImageDiv = styled.div`
  position: relative;
  cursor: pointer;
  & > .content {
    display: none;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 10px;
    position: absolute;
    width: 140px;
    right: 0px;
    left: 0;
    z-index: 99999;
    bottom: 0;
    margin: 20px auto;
    box-shadow: 0px 2px 12px -8px rgb(25 19 38 / 10%), 0px 1px 1px rgb(25 19 38 / 5%);
  }
  :hover {
    & > .content {
      display: block;
    }
  }
`;
const ImageItem = styled.div`
  /* padding: 5px 0; */
  position: relative;
  .itemDiv {
    display: none;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 10px;
    position: absolute;
    width: 100px;
    right: 0px;
    left: 130px;
    z-index: 99999;
    bottom: 0;
    margin: 20px auto;
    box-shadow: 0px 2px 12px -8px rgb(25 19 38 / 10%), 0px 1px 1px rgb(25 19 38 / 5%);
  }
  :hover {
    & > .itemDiv {
      display: block;
    }
  }
  & > .content-item {
    padding: 5px 10px;
  }
  & > .content-item:hover {
    background-color: rgba(112, 112, 112, 0.2);
  }
`;
const SingleLink = styled(Link)`
  padding: 5px 10px;
  width: 100%;
  :hover {
    background-color: rgba(112, 112, 112, 0.2);
  }
`;

const MoreIconSvg = styled(MoreIcon)`
  width: 30px;
  height: 30px;
`;
const TextDiv = styled(Text)`
  width: 70px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
`;

const MoreDropDown: React.FC<Props> = ({ list }) => {
  return (
    <>
      <ImageDiv>
        <div>
          <MoreIconSvg />
        </div>
        <div className="content">
          {list?.map((item) => {
            return item.list && item.list.length > 1 ? (
              <ImageItem key={item.key}>
                <Flex className="content-item" alignItems="center" justifyContent="space-between">
                  <>
                    <Image src={item.icon} title={item.name} />
                    <TextDiv marginLeft="5px">{item.name}</TextDiv>
                  </>
                  <ChevronRightIcon />
                </Flex>
                <div className="itemDiv">
                  {item.list?.map((childItem) => {
                    return <ExternalLink key={childItem.link} link={childItem.link} name={childItem.name} />;
                  })}
                </div>
              </ImageItem>
            ) : (
              item.list && item.list.length > 0 && (
                <SingleLink key={item.key} external href={item.list[0].link} color="textSubtle">
                  <Image src={item.icon} title={item.name} />
                  <TextDiv marginLeft="5px">{item.name}</TextDiv>
                </SingleLink>
              )
            );
          })}
        </div>
      </ImageDiv>
    </>
  );
};

export default MoreDropDown;