import React from 'react';
import { Nav } from '../Nav';
import {
  Box,
  HStack,
  Text,
  HamburgerIcon,
  WeatherMoon,
  CloseIcon,
  SunIcon,
  Pressable,
  VStack,
  Link,
  AlertCircleIcon,
} from '../../primitives';
import { LayoutContext } from './LayoutContext';
// import { ResponsiveSidebar } from './ResponsiveSidebar';
export const LayoutHeader = ({ fluidLayout = false }: any) => {
  const {
    headerItems,
    setIsOpenSidebar,
    isOpenSidebar,
    Docsearch,
    showBanner,
  } = React.useContext(LayoutContext);

  return (
    <>
      {showBanner ? (
        <VStack
          zIndex={10}
          top="$0"
          left="$0"
          sx={{
            _web: {
              position: 'sticky',
            },
          }}
        >
          <Box
            py="$5"
            px="$4"
            justifyContent="center"
            alignItems="flex-start"
            flexDirection="row"
            sx={{
              _web: {
                background:
                  'linear-gradient(90deg, #41897C 2.06%, #0C61B1 96.33%)',
              },
            }}
          >
            <AlertCircleIcon
              mt="$1"
              mr="$3"
              color="$background50"
              minWidth={16}
              minHeight={16}
              fill="none"
            />

            <Text fontSize="$md" color="$text50">
              It is recommended to eject your components for greater
              customization. Please{' '}
              <Link
                href="/ui/docs/theme-configuration/customizing-theme/eject-library"
                sx={{
                  _web: {
                    textDecorationLine: 'underline',
                    textDecorationColor: '$text50',
                    textUnderlineOffset: 4,
                    textDecorationThickness: 1,
                  },
                }}
              >
                <Text fontSize="$md" color="$text50">
                  click here
                </Text>
              </Link>{' '}
              for more information.
            </Text>
          </Box>
          <Nav
            w="$full"
            py="$4"
            sx={{
              bg: '$white',
              borderColor: fluidLayout ? '$borderLight200' : null,
              _dark: {
                bg: '$black',
                borderColor: fluidLayout ? '$borderDark800' : null,
              },
            }}
            borderBottomWidth={fluidLayout ? 1 : 0}
          >
            <Box
              flexDirection="row"
              alignItems="center"
              justifyContent="space-between"
              sx={{
                '@lg': {
                  mx: fluidLayout ? '$5' : 40,
                },
                '@xl': {
                  mx: fluidLayout ? '$5' : 120,
                },
              }}
              mx={'$5'}
            >
              <HeaderWrapperComponent data={headerItems.left} />
              {/* <HeaderWrapperComponent data={headerItems.center} /> */}
              <HStack alignItems="center">
                {Docsearch && (
                  <Box mr="$6">
                    <Docsearch />
                  </Box>
                )}
                <HeaderWrapperComponent
                  data={headerItems.right}
                  sx={{
                    '@md': {
                      display: 'flex',
                    },
                  }}
                  display="none"
                />
                {Docsearch ? (
                  <Box
                    sx={{
                      'display': 'none',
                      '@sm': {
                        display: 'flex',
                      },
                    }}
                  >
                    <ToggleColorModeButton />
                  </Box>
                ) : (
                  <ToggleColorModeButton />
                )}

                <Pressable
                  onPress={() => {
                    setIsOpenSidebar(!isOpenSidebar);
                  }}
                  display="flex"
                  sx={{
                    '_web': {
                      ':focus': {
                        outlineWidth: 0,
                        boxShadow: 'none',
                        _dark: {
                          boxShadow: 'none',
                        },
                      },
                    },
                    '@base': Docsearch
                      ? {
                          ml: 0,
                        }
                      : {
                          ml: '$6',
                        },
                    '@sm': {
                      ml: '$6',
                    },
                    '@lg': {
                      display: 'none',
                    },
                  }}
                >
                  {isOpenSidebar ? (
                    <CloseIcon
                      sx={{
                        _dark: {
                          color: '$white',
                        },
                      }}
                      w="$6"
                      h="$6"
                    />
                  ) : (
                    <HamburgerIcon
                      sx={{
                        _dark: {
                          color: '$white',
                        },
                      }}
                      w="$6"
                      h="$6"
                    />
                  )}
                </Pressable>
              </HStack>
            </Box>
          </Nav>
        </VStack>
      ) : (
        <Nav
          w="$full"
          py="$4"
          position="sticky"
          zIndex={10}
          top="0"
          left="0"
          sx={{
            bg: '$white',
            borderColor: fluidLayout ? '$borderLight200' : null,
            _dark: {
              bg: '$black',
              borderColor: fluidLayout ? '$borderDark800' : null,
            },
          }}
          borderBottomWidth={fluidLayout ? 1 : 0}
        >
          <Box
            flexDirection="row"
            alignItems="center"
            justifyContent="space-between"
            sx={{
              '@lg': {
                mx: fluidLayout ? '$5' : 40,
              },
              '@xl': {
                mx: fluidLayout ? '$5' : 120,
              },
            }}
            mx={'$5'}
          >
            <HeaderWrapperComponent data={headerItems.left} />
            {/* <HeaderWrapperComponent data={headerItems.center} /> */}
            <HStack alignItems="center">
              {Docsearch && (
                <Box mr="$6">
                  <Docsearch />
                </Box>
              )}
              <HeaderWrapperComponent
                data={headerItems.right}
                sx={{
                  '@md': {
                    display: 'flex',
                  },
                }}
                display="none"
              />
              {Docsearch ? (
                <Box
                  sx={{
                    'display': 'none',
                    '@sm': {
                      display: 'flex',
                    },
                  }}
                >
                  <ToggleColorModeButton />
                </Box>
              ) : (
                <ToggleColorModeButton />
              )}

              <Pressable
                onPress={() => {
                  setIsOpenSidebar(!isOpenSidebar);
                }}
                display="flex"
                sx={{
                  '_web': {
                    ':focus': {
                      outlineWidth: 0,
                      boxShadow: 'none',
                      _dark: {
                        boxShadow: 'none',
                      },
                    },
                  },
                  '@base': Docsearch
                    ? {
                        ml: 0,
                      }
                    : {
                        ml: '$6',
                      },
                  '@sm': {
                    ml: '$6',
                  },
                  '@lg': {
                    display: 'none',
                  },
                }}
              >
                {isOpenSidebar ? (
                  <CloseIcon
                    sx={{
                      _dark: {
                        color: '$white',
                      },
                    }}
                    w="$6"
                    h="$6"
                  />
                ) : (
                  <HamburgerIcon
                    sx={{
                      _dark: {
                        color: '$white',
                      },
                    }}
                    w="$6"
                    h="$6"
                  />
                )}
              </Pressable>
            </HStack>
          </Box>
        </Nav>
      )}
    </>
  );
};

const HeaderItem = ({ itemData, ...props }: any) => {
  const { colorMode, Image, Link } = React.useContext(LayoutContext);

  if (itemData.type === 'image' && Image) {
    return (
      <Link href={itemData?.redirectUrl ?? '/'}>
        <Box {...props}>
          <Image
            src={
              colorMode === 'dark' && itemData.darkModeUrl
                ? itemData.darkModeUrl
                : itemData.url
            }
            alt="Logo"
            width={157}
            height={30}
          />
        </Box>
      </Link>
    );
  } else if (itemData.type === 'link' && Link) {
    const { icon, darkIcon, text } = itemData;
    return (
      <Box {...props}>
        <Link height="$6" href={itemData.url} mx="$3">
          {colorMode === 'dark' ? darkIcon : icon ?? <Text>{text}</Text>}
        </Link>
      </Box>
    );
  } else if (itemData.type === 'component') {
    const Component = itemData.component;
    return (
      <Box {...props}>
        <Component />
      </Box>
    );
  }
  return <></>;
};
const HeaderWrapperComponent = ({ data, ...props }: any) => {
  return (
    <HStack justifyContent="center" alignItems="center" {...props}>
      {data.map((dataItem: any) => {
        return <HeaderItem itemData={dataItem} />;
      })}
    </HStack>
  );
};

export const ToggleColorModeButton = () => {
  const { colorMode, toggleColorMode } = React.useContext(LayoutContext);
  return (
    <Pressable
      onPress={toggleColorMode}
      accessibilityRole="button"
      mx="$3"
      sx={{
        '_web': {
          outlineWidth: 0,
          boxShadow: 'none',
        },
        ':focusVisible': {
          _web: {
            outlineWidth: 2,
            outlineColor: '$primary700',
            outlineStyle: 'solid',
          },
        },
        ':focus': {
          _web: {
            // outlineWidth: 2,
            // outlineColor: "$primary700",
            // outlineStyle: "solid",
            boxShadow: 'none',
          },
        },
      }}
    >
      {colorMode === 'light' ? (
        <SunIcon w="$6" h="$6" />
      ) : (
        <WeatherMoon color="$white" w="$6" h="$6" />
      )}
    </Pressable>
  );
};
