import {
  Box,
  ComponentWithAs,
  Flex,
  IconProps,
  List,
  ListItem,
  useColorMode,
  VStack,
} from '@chakra-ui/react';
import { useMemo } from 'react';
import { IntlProvider } from 'react-intl';

import { theme } from '../../modules/theme';
import { Typography } from '../Typography';

import { Language } from './components/Language';
import { Context } from './context';
import { MediaData, useData } from './data';
import { en } from './locales';
import { Logo } from './components/Logo';
import { Medias } from './components/Medias';

export type FooterMenuItemProps = {
  title: string;
  href: string;
  target: '_self' | '_blank';
  'data-analytics-id': string;
};
export type FooterMediaOptionProps = {
  name: string;
  icon?: ComponentWithAs<'svg', IconProps> | any;
  href: string;
  target: '_self' | '_blank';
  'data-analytics-id': string;
};
export type FooterMediaItemProps = {
  name?: string;
  href: string;
  target: '_self' | '_blank';
  'data-analytics-id'?: string;
  icon: ComponentWithAs<'svg', IconProps> | any;
  children?: Array<FooterMediaOptionProps>;
};

export type FooterMenuProps = {
  menu: string;
  items: Array<FooterMenuItemProps>;
};

type Props = {
  locale: string;
  messages: Record<string, string>;
  pathname: string;
  menus?: FooterMenuProps[];
  media?: FooterMediaItemProps[];
  localeSwitchable?: boolean;
  compact?: boolean;
};
export const genIconComponent = (icon: any) => {
  if (!icon) return <></>;
  if (typeof icon === 'string') {
    return (
      <Box className={'svg-image'} h={theme.sizes['5']} w={theme.sizes['5']} cursor="pointer" />
    );
  } else {
    const Icon = icon;
    return (
      <Icon className={'svg-icon'} h={theme.sizes['5']} w={theme.sizes['5']} cursor="pointer" />
    );
  }
};
const Component = ({
  menus,
  media,
  localeSwitchable = true,
  locale,
  compact = false,
}: {
  menus?: FooterMenuProps[];
  media?: FooterMediaItemProps[];
  localeSwitchable?: boolean;
  locale?: string;
  compact?: boolean;
}) => {
  const { colorMode } = useColorMode();

  const data = useData();
  const mediaData = useMemo(() => (media?.length && media?.length > 0 ? media : MediaData), []);

  return (
    <Flex
      as="footer"
      alignItems={'center'}
      justifyContent="center"
      bgColor={
        compact
          ? theme.colors[colorMode].layer[1].default
          : theme.colors[colorMode].layer[2].default
      }
      w="100%"
      borderTop={`1px solid ${
        compact ? theme.colors[colorMode].border[2] : theme.colors[colorMode].border.disabled
      }`}
    >
      <Flex w="100%" flexDirection="column" justifyContent="center">
        {!compact && (
          <>
            <Flex
              w="100%"
              justifyContent={'center'}
              px={{ base: theme.sizes['5'], md: theme.sizes['10'], lg: 0 }}
              py={theme.sizes['6']}
              borderBottom={`1px solid ${theme.colors[colorMode].border[3]}`}
            >
              <Flex
                w="100%"
                maxW="1200px"
                justifyContent={{ base: 'center', lg: 'space-between' }}
                direction={{ base: 'column', lg: 'row' }}
                alignItems={{ base: 'flex-start', lg: 'center' }}
                gap={theme.sizes['8']}
              >
                <Box
                  height={theme.sizes['6']}
                  cursor={'pointer'}
                  as={'a'}
                  href={`https://www.bnbchain.org/${locale}`}
                  target={'_self'}
                >
                  <Logo />
                </Box>
                <Medias mediaData={mediaData} />
              </Flex>
            </Flex>
            <Flex
              flexDirection="column"
              alignSelf="center"
              w="100%"
              maxW={{ base: '100%', lg: '1200px' }}
              px={{ base: theme.sizes['5'], md: theme.sizes['10'], lg: 0 }}
              pt={{ base: theme.sizes['8'], md: theme.sizes['10'], lg: theme.sizes['20'] }}
              pb={{ base: theme.sizes['16'], md: theme.sizes['20'], lg: theme.sizes['20'] }}
            >
              <Box
                display="grid"
                gridTemplateColumns={{
                  base: 'repeat(1, 1fr)',
                  md: 'repeat(2, 1fr)',
                  lg: 'repeat(5, 1fr)',
                }}
                gap={{ base: theme.sizes['10'], md: theme.sizes['10'], lg: theme.sizes['8'] }}
                w="100%"
              >
                {Object.entries(menus?.length ? menus : data).map(([k, v]) => (
                  <VStack key={k} spacing={{ base: theme.sizes['5'] }} alignItems="start">
                    <Typography
                      variant="body"
                      size="md"
                      fontWeight="500"
                      color={theme.colors[colorMode].text.primary}
                    >
                      {menus?.length ? v.menu : k}
                    </Typography>

                    <List>
                      {(menus?.length ? v.items : v).map((it: FooterMenuItemProps) => (
                        <ListItem
                          key={it.title}
                          _notLast={{ mb: [theme.sizes['4']] }}
                          _hover={{
                            cursor: 'pointer',
                            a: {
                              color: theme.colors[colorMode].text.brand,
                            },
                          }}
                        >
                          <Typography
                            as="a"
                            variant="label"
                            size="md"
                            color={theme.colors[colorMode].text.tertiary}
                            href={it.href}
                            target={it.target}
                            data-analytics-id={it['data-analytics-id']}
                          >
                            {it.title}
                          </Typography>
                        </ListItem>
                      ))}
                    </List>
                  </VStack>
                ))}
              </Box>
            </Flex>
          </>
        )}
        <Flex
          w="100%"
          borderTop={compact ? 'none' : `1px solid ${theme.colors[colorMode].border[3]}`}
          justifyContent={'center'}
        >
          <Flex
            flexDirection={{ base: 'column', md: 'row' }}
            alignItems="center"
            justifyContent="space-between"
            w="100%"
            maxW={compact ? 'none' : '1200px'}
            px={{
              base: theme.sizes['5'],
              md: theme.sizes['10'],
              lg: compact ? theme.sizes['10'] : 0,
            }}
            py={{
              base: compact ? theme.sizes['4'] : theme.sizes['6'],
              md: compact ? '18px' : theme.sizes['5'],
            }}
            gap={'12px'}
          >
            <Typography
              variant="label"
              size="md"
              color={theme.colors[colorMode].text.tertiary}
              textAlign="center"
              order={{ base: 1, md: 0 }}
              fontWeight={500}
            >
              © {new Date().getFullYear()}{' '}
              <Box
                transition={'all .15s'}
                as={'a'}
                href={'https://www.bnbchain.org'}
                textUnderlineOffset={'2px'}
                _hover={{
                  color: theme.colors[colorMode].border.brand,
                  textDecoration: 'underline',
                }}
              >
                BNB Chain
              </Box>
              . All rights reserved.
            </Typography>
            <Flex
              w={{ base: '100%', md: 'auto' }}
              flex={1}
              minW={0}
              alignItems="center"
              justifyContent="center"
              gap={{ base: theme.sizes['4'], md: theme.sizes['5'] }}
              flexDir={{ base: localeSwitchable ? 'column' : 'row', md: 'row' }}
            >
              <Flex
                display={{ base: compact ? 'flex' : 'none', md: 'flex' }}
                alignItems={'center'}
                justifyContent={'flex-end'}
                flex={{ base: '', md: 1 }}
                minW={0}
                overflow={'hidden'}
              >
                {compact && <Medias mediaData={mediaData} />}
              </Flex>
              {compact && (
                <Box
                  display={{ base: localeSwitchable ? 'none' : 'block', md: 'block' }}
                  w={'1px'}
                  h={theme.sizes['5']}
                  bg={theme.colors[colorMode].border['3']}
                />
              )}
              <Language localeSwitchable={localeSwitchable} />
            </Flex>
          </Flex>
        </Flex>
      </Flex>
    </Flex>
  );
};

export const Footer = ({
  locale,
  pathname,
  menus,
  media,
  localeSwitchable,
  compact,
  ...otherProps
}: Props) => {
  const messages = useMemo(() => {
    return { ...(en as Record<string, string>), ...otherProps.messages };
  }, [otherProps.messages]);

  return (
    <IntlProvider locale={locale} messages={messages}>
      <Context.Provider value={{ pathname }}>
        <Component
          menus={menus}
          media={media}
          localeSwitchable={localeSwitchable}
          compact={compact}
          locale={locale}
        />
      </Context.Provider>
    </IntlProvider>
  );
};