// import { CloseIcon, MenuIcon } from '@loft/react-icons';
// import {
//   Accordion,
//   ActionButton,
//   Avatar,
//   Container,
//   Divider,
//   Drawer,
//   Flex,
//   Grid,
//   GridItem,
//   Image,
//   Link,
//   List,
//   ListItem,
//   mediaQueries,
//   MenuItem,
//   Submenu,
//   Typography,
//   UISpacer,
// } from '@loft/react-loft';
// import { logo, spacing } from '@loft/tokens-loft';

() => {
  const [showMobileMenu, setShowMobileMenu] = React.useState(false);

  const listClassName = css({
    display: 'flex',
    flexDirection: 'column',
    gap: 'initial',

    [mediaQueries.xl.up]: {
      flexDirection: 'row',
      gap: spacing.layout.base04,
    },
  })().className;

  const showBelowDesktop = css({
    [mediaQueries.xl.up]: { display: 'none' },
  })().className;

  const showOnDesktop = css({
    display: 'none',
    [mediaQueries.xl.up]: { display: 'flex' },
  })().className;

  const ITEMS = [{
    label: 'Comprar',
    href: 'https://loft.com.br/venda/imoveis/sp/sao-paulo',
  }, {
    label: 'Vender',
    href: 'https://loft.com.br/anunciar/imovel',
  },  {
    label: 'Avaliação',
    href: 'https://loft.com.br/anunciar/calculadora-de-precos-imoveis',
  },  {
    label: 'Parceiros',
    href: 'https://loft.com.br/corretor-de-imoveis',
  },  {
    label: 'Propriedades Loft',
    href: 'https://loft.com.br/propriedades-loft',
  }];

  const SUBMENU_ITEMS = [{
    label: 'Financiamento Imobiliário',
    href: 'https://loft.com.br/loftcred/financiamento-imobiliario',
  }, {
    label: 'Crédito com Garantia',
    href: 'https://loft.com.br/loftcred/credito',
  }, {
    label: 'Seleção Bruno Gagliasso',
    href: 'https://loft.com.br/bruno-indica'
  }];

  const LOFT_LOGO = (
    <a href="https://loft.com.br">
      <Image src={logo.primary.small.svg} />
    </a>
  );

  return (
    <header>
      <Container maxWidth="xxl">
        <Flex justifyContent="space-between" className={showOnDesktop}>
          {LOFT_LOGO}

          <List className={listClassName}>
            {ITEMS.map((item, index) => (
              <ListItem>
                <MenuItem href={item.href} selected={index === 0}>
                  {item.label}
                </MenuItem>
              </ListItem>
            ))}

            <ListItem>
              <Submenu menuItems={SUBMENU_ITEMS}>
                Mais
              </Submenu>
            </ListItem>
          </List>
        </Flex>

        <Flex justifyContent="space-between" className={showBelowDesktop}>
          {LOFT_LOGO}

          <ActionButton quiet onClick={() => setShowMobileMenu(true)}>
            <MenuIcon />
          </ActionButton>
        </Flex>

        {showMobileMenu && (
          <Drawer open placement="right">
            <Flex justifyContent="space-between" alignItems="center">
              {LOFT_LOGO}
      
              <ActionButton quiet onClick={() => setShowMobileMenu(false)}>
                <CloseIcon />
              </ActionButton>
            </Flex>
      
            <UISpacer xs="base04" />
      
            <List className={listClassName}>
              {ITEMS.map((item, index) => (
                <ListItem>
                  <MenuItem href={item.href} selected={index === 0} vertical>
                    {item.label}
                  </MenuItem>
                </ListItem>
              ))}
      
              <ListItem>
                <Submenu menuItems={SUBMENU_ITEMS} vertical>
                  Mais
                </Submenu>
              </ListItem>
            </List>
          </Drawer>
        )}
      </Container>
    </header>
  );
}