import React, { useState, useEffect } from "react";
import { useWindowDimensions } from "react-native";
import { AtomButtonIcon } from "native/atoms/Buttons/Icon";
import { AtomIcon } from "native/atoms/Icon";
import { AtomLink } from "native/atoms/Link";
import { AtomLogo, ILogoProps } from "native/atoms/Logo";
import { AtomBody } from "native/atoms/Typography/Body";
import {
  AppsButtonsContainer,
  FirstRow,
  FooterContainer,
  FooterMenuContainer,
  FooterText,
  LogoContainer,
  SocialMediaContainer,
  SocialMediaContainer2,
  SocialMediaLink,
} from "./styles";

export interface IFooterProps extends Omit<ILogoProps, "size"> {
  /** Function on press the logo */
  onPress?: () => void;
  /** an array with the icon text and links for the social icos */
  socialMediaIcons?: any;
  /** an array with the text and url of every menu link */
  footerLinks: any;
  /** an object for modify the apps buttons */
  appsButtons: appsBtns;
  /** footer text */
  footerText: string;
}

interface appsBtns {
  appstore: appBtn;
  playstore: appBtn;
}

interface appBtn {
  text?: string;
  appUrl: string;
  showButton: boolean;
}

export const OrganismFooter = ({
  socialMediaIcons,
  footerLinks = [{ text: "Text Link", url: "https://mycooler.com/" }],
  appsButtons = {
    appstore: { appUrl: "/", showButton: true },
    playstore: { appUrl: "/", showButton: true },
  },
  footerText,
  onPress = () => {},
  text = "sided",
  logoTheme = "monocromatic",
  url = "/",
}: IFooterProps) => {
  const { width } = useWindowDimensions();

  const [flexDirection, setflexDirection] = useState<string>("column");
  const [heightMenu, setheightMenu] = useState<string>("auto");
  const [marginBotton, setMarginBotton] = useState<string>("auto");
  const [btnsContainerWidth, setbtnsContainerWidth] = useState<string>("100%");
  const [btnsContainerHeight, setbtnsContainerHeight] =
    useState<string>("100px");

  useEffect(() => {
    /* istanbul ignore next */
    if (width <= 640) {
      setflexDirection("column");
      setheightMenu("120px");
      setMarginBotton("5%");
      setbtnsContainerWidth("100%");
      setbtnsContainerHeight("100px");
      /* istanbul ignore next */
    } else if (width > 640 && width <= 1024) {
      setflexDirection("row");
      setheightMenu("55px");
      setMarginBotton("0");
      setbtnsContainerWidth("55%");
      setbtnsContainerHeight("auto");
      /* istanbul ignore next */
    } else if (width > 1024) {
      setflexDirection("row");
      setheightMenu("auto");
      setMarginBotton("0");
      setbtnsContainerWidth("55%");
      setbtnsContainerHeight("90px");
    }
  }, [width]);

  return (
    <FooterContainer>
      <FirstRow>
        <LogoContainer>
          <AtomLogo
            size="small"
            logoTheme={logoTheme}
            text={text}
            url={url}
            onPress={() => onPress()}
          />
        </LogoContainer>
        <FooterMenuContainer
          flexDirection={flexDirection}
          height={heightMenu}
          menuMarginBottom={marginBotton}
        >
          {footerLinks
            ? footerLinks.map((item: any, idx: number) => (
                <AtomLink
                  url={item.url}
                  typeIcon={"noIcon"}
                  text={item.text}
                  color="custom"
                  customColor="light"
                  typeLink="section"
                  key={idx}
                />
              ))
            : null}
        </FooterMenuContainer>
        <AppsButtonsContainer
          flexDirection={flexDirection}
          btnsContainerWidth={btnsContainerWidth}
          btnsHeight={btnsContainerHeight}
        >
          <AtomButtonIcon
            icon={"apple"}
            disabled={false}
            color={"primary"}
            text={appsButtons.appstore.text || "App Store"}
            width={width >= 834 ? "154px" : "100%"}
            iconAlign="left"
            onPress={() =>
              window.open(`${appsButtons.appstore.appUrl}`, "_blank")
            }
            style={{
              display: `${!appsButtons.appstore.showButton ? "none" : "flex"}`,
            }}
          />
          <AtomButtonIcon
            icon={"google_play"}
            disabled={false}
            color={"primary"}
            text={appsButtons.appstore.text || "Play Store"}
            width={width >= 834 ? "154px" : "100%"}
            iconAlign="left"
            onPress={() =>
              window.open(`${appsButtons.playstore.appUrl}`, "_blank")
            }
            style={{
              display: `${!appsButtons.playstore.showButton ? "none" : "flex"}`,
            }}
          />
        </AppsButtonsContainer>
        <SocialMediaContainer2>
          {socialMediaIcons
            ? socialMediaIcons.map((item: any, idx: number) => (
                <SocialMediaLink href={item.url} key={item.id || idx}>
                  <AtomIcon
                    name={item.iconName}
                    size={18}
                    color={"neutral100"}
                  />
                </SocialMediaLink>
              ))
            : null}
        </SocialMediaContainer2>
      </FirstRow>
      <FooterText>
        <AtomBody size="xsmall" text={footerText} color={"neutral100"} />
      </FooterText>
    </FooterContainer>
  );
};
