import React, { useContext } from "react";
import styled from "styled-components";
import { CogIcon } from "../../../components/Svg";
import IconButton from "../../../components/Button/IconButton";
import Link from "../../../components/Link/Link";
import { MENU_ENTRY_HEIGHT } from "../config";
import { PanelProps, PushedProps } from "../types";
// import CakePrice from "./CakePrice";
import ThemeSwitcher from "./ThemeSwitcher";
import LangSelector from "./LangSelector";
import MoreDropDown from "./MoreDropDown";
import DefaultDropDown from "./DefaultDropDown";
import { ConfigContext } from "../../../components/ConfigProvider/context";

interface Props extends PanelProps, PushedProps {
  documentAddress?: string;
}

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 PanelFooter: React.FC<Props> = ({
  isPushed,
  pushNav,
  toggleTheme,
  isDark,
  cakePriceUsd,
  currentLang,
  langs,
  setLang,
  socialLink,
  documentAddress,
}) => {
  const { t } = useContext(ConfigContext);
  const defaultList = socialLink?.slice(0, 3);
  const moreList = socialLink?.slice(3);
  if (!isPushed) {
    return (
      <Container>
        <IconButton variant="text" onClick={() => pushNav(true)}>
          <CogIcon />
        </IconButton>
      </Container>
    );
  }
  return (
    <Container>
      <SocialEntry>
        {/* <CakePrice cakePriceUsd={cakePriceUsd} /> */}
        <>
          {defaultList && <DefaultDropDown list={defaultList} />}
          {moreList && moreList.length > 0 && <MoreDropDown list={moreList} />}
        </>
      </SocialEntry>
      <SettingsEntry>
        {/* <ThemeSwitcher isDark={isDark} toggleTheme={toggleTheme} /> */}
        <LangSelector currentLang={currentLang} langs={langs} setLang={setLang} />
        <Link href={documentAddress} target="_blank" color="#7A6EAA">
          {t("help center")}
        </Link>
      </SettingsEntry>
    </Container>
  );
};

export default PanelFooter;
