import React from "react";
import styled from "styled-components";
import { CogIcon } from "../../../components/Svg";
import IconButton from "../../../components/Button/IconButton";
import { MENU_ENTRY_HEIGHT } from "../config";
import { PanelProps, PushedProps, OutLink } from "../types";
import CakePrice from "./CakePrice";
import ThemeSwitcher from "./ThemeSwitcher";
import SocialLinks from "./SocialLinks";
import LangSelector from "./LangSelector";
import Flex from "../../../components/Box/Flex";
import Text from "../../../components/Text/Text";
import Dropdown from "../../../components/Dropdown/Dropdown";
import Link from "../../../components/Link/Link";
import MoreIcon from "../../../components/Svg/Icons/More";

interface Props extends PanelProps, PushedProps {}

const Container = styled.div`
  flex: none;
  padding: 8px 4px;
  background-color: ${({ theme }) => theme.nav.background};
  border-top: solid 2px rgba(133, 133, 133, 0.1);
`;

const SettingsEntry = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: ${MENU_ENTRY_HEIGHT}px;
  padding: 0 8px;
`;

const SocialEntry = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: ${MENU_ENTRY_HEIGHT}px;
  padding: 0 16px;
`;
const Image = styled.img`
  width: 30px;
  height: 30px;
  border-radius: 50%;
`;
const ImageDiv = styled.div`
  position: relative;
  cursor: pointer;

  & > .moreText {
  }
  & > .content {
    display: none;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 10px;
    position: absolute;
    width: 100px;
    /* height: 400px; */
    /* top: 0; */
    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: 80px;
    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;
    }
  }
`;

const MoreIconSvg = styled(MoreIcon)`
  width: 30px;
  height: 30px;
`;

const PanelFooter: React.FC<Props> = ({
  isPushed,
  pushNav,
  toggleTheme,
  isDark,
  cakePriceUsd,
  currentLang,
  langs,
  setLang,
  outLink,
}) => {
  console.log("----:", outLink);
  let covers: string | undefined;
  let defaultList: OutLink[] | undefined;
  let moreList: OutLink[] | undefined;
  if (outLink && outLink.length > 2) {
    const list = outLink;
    moreList = list.slice(2, outLink.length);
    defaultList = outLink.splice(0, 2);
    covers = outLink[0].icon;
  } else {
    defaultList = outLink;
  }
  if (!isPushed) {
    return (
      <Container>
        <IconButton variant="text" onClick={() => pushNav(true)}>
          <CogIcon />
        </IconButton>
      </Container>
    );
  }
  return (
    <Container>
      <SocialEntry>
        <CakePrice cakePriceUsd={cakePriceUsd} />

        <>
          {defaultList && defaultList.length > 0
            ? defaultList.map((item) => {
                return item.list && item.list.length > 1 ? (
                  <Dropdown position="top-right" target={<Image src={item.icon} />}>
                    {item.list && item.list.length > 0
                      ? item.list?.map((childItem) => {
                          return (
                            <Link href={childItem.link} color="textSubtle">
                              <Text>{childItem.name}</Text>
                            </Link>
                          );
                        })
                      : ""}
                  </Dropdown>
                ) : item.list && item.list.length > 0 ? (
                  <Link href={item.list[0].link} color="textSubtle">
                    <Image src={item.icon} />
                  </Link>
                ) : (
                  ""
                );
              })
            : ""}
          {moreList && moreList.length > 0 ? (
            <ImageDiv>
              <div className="moreText">
                <MoreIconSvg />
              </div>
              <div className="content">
                {moreList?.map((item) => {
                  return item.list && item.list.length > 1 ? (
                    <ImageItem>
                      <Image src={item.icon} />
                      <div className="itemDiv">
                        {item.list?.map((childItem) => {
                          return (
                            <Link href={childItem.link} color="textSubtle">
                              <Text>{childItem.name}</Text>
                            </Link>
                          );
                        })}
                      </div>
                    </ImageItem>
                  ) : item.list && item.list.length > 0 ? (
                    <Link href={item.list[0].link} color="textSubtle">
                      <Image src={item.icon} />
                    </Link>
                  ) : (
                    ""
                  );
                })}
              </div>
            </ImageDiv>
          ) : (
            // <Dropdown position="top-right" target={<Text>more</Text>}>
            //   {moreList?.map((item) => {
            //     return (
            //       <ImageDiv>
            //         <Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftupian.qqjay.com%2Fu%2F2016%2F0919%2F1_171052_3.jpg&refer=http%3A%2F%2Ftupian.qqjay.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654327831&t=b02514c7e57816af454949c6929e4ecb" />
            //         <div className="content">ee</div>
            //       </ImageDiv>
            //       // <Dropdown
            //       //   position="bottom"
            //       //   target={
            //       //     <Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftupian.qqjay.com%2Fu%2F2016%2F0919%2F1_171052_3.jpg&refer=http%3A%2F%2Ftupian.qqjay.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654327831&t=b02514c7e57816af454949c6929e4ecb" />
            //       //   }
            //       // >
            //       //   {item.list && item.list.length > 0
            //       //     ? item.list?.map((childItem) => {
            //       //         return (
            //       //           <Link href={childItem.link} color="textSubtle">
            //       //             <Text>{childItem.name}</Text>
            //       //           </Link>
            //       //         );
            //       //       })
            //       //     : ""}
            //       // </Dropdown>
            //     );
            //   })}
            // </Dropdown>
            ""
          )}
          {/* {outLink && outLink.length > 1 ? (
            <Dropdown position="top-right" target={<Image src={covers} />}>
              {outLink && outLink.length > 0
                ? outLink?.map((item) => {
                    return (
                      <Link href={item.link} color="textSubtle">
                        <Text>{item.name}</Text>
                      </Link>
                    );
                  })
                : ""}
            </Dropdown>
          ) : (
            <>
              {outLink && outLink.length > 0
                ? outLink?.map((item) => {
                    return (
                      <Link href={item.link} color="textSubtle">
                        <Image src={covers} />
                      </Link>
                    );
                  })
                : ""}
            </>
          )} */}
        </>
      </SocialEntry>
      <SettingsEntry>
        <ThemeSwitcher isDark={isDark} toggleTheme={toggleTheme} />
        <LangSelector currentLang={currentLang} langs={langs} setLang={setLang} />
      </SettingsEntry>
    </Container>
  );
};

export default PanelFooter;
