import { useState } from "react";
import {
  createStyles,
  Header,
  Container,
  Group,
  Burger,
  rem,
  Image,
  Menu,
  Paper,
  Stack,
} from "@mantine/core";
import { IconExternalLink } from "@tabler/icons-react";
import { useDisclosure } from "@mantine/hooks";
import logo from "./assets/logos/logo-text.png";

const useStyles = createStyles((theme) => ({
  header: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    height: "100%",
  },

  links: {
    [theme.fn.smallerThan("md")]: {
      display: "none",
    },
  },

  linksmobile: {
    [theme.fn.largerThan("md")]: {
      display: "none",
    },
  },

  mobilemenu: {
    [theme.fn.largerThan("md")]: {
      display: "none",
    },
  },

  burger: {
    [theme.fn.largerThan("md")]: {
      display: "none",
    },
  },

  link: {
    display: "block",
    lineHeight: 1,
    padding: `${rem(8)} ${rem(12)}`,
    borderRadius: theme.radius.sm,
    textDecoration: "none",
    color:
      theme.colorScheme === "dark"
        ? theme.colors.dark[0]
        : theme.colors.gray[7],
    fontSize: theme.fontSizes.md,
    fontWeight: 700,

    "&:hover": {
      backgroundColor: theme.colors.gray[0],
      color: "#eb7b1a",
    },
  },

  linkActive: {
    backgroundColor: "#ffb84d",
    "&:hover": {
      backgroundColor: "#ffb84d",
      color: "#eb7b1a",
    },
  },
}));

interface HeaderSimpleProps {
  links: { link: string; label: string }[];
}

export function HeaderSimple({
  links,
  openedMenuKarta,
  menuactionskarta,
}: HeaderSimpleProps) {
  const [openedMenu, menuactions] = menuactionskarta
    ? [openedMenuKarta, menuactionskarta]
    : useDisclosure(false);
  const [active, setActive] = useState("");
  const { classes, cx } = useStyles();

  const items = links.slice(1).map(
    (
      link // for custom authors link
    ) => (
      <a
        key={link.label}
        href={link.link}
        className={cx(classes.link, {
          [classes.linkActive]: active === link.link,
        })}
        // onClick={() => {
        //   setActive(link.link);
        // }}
      >
        {link.label}
      </a>
    )
  );

  return (
    <Header height={60}>
      <Container className={classes.header}>
        <Image maw={150} src={logo} component="a" href="/" />

        {/* Menu for pc */}
        <Group spacing={5} className={classes.links}>
          <Menu shadow="md" width={200}>
            <Menu.Target>
              <a
                key="Авторы"
                href="#authors"
                className={cx(classes.link, {
                  [classes.linkActive]: active === "#authors",
                })}
                onClick={(e) => {
                  e.preventDefault();
                  // setActive("#authors");
                }}
              >
                Авторы
              </a>
            </Menu.Target>

            <Menu.Dropdown>
              <Menu.Item
                rightSection={
                  <IconExternalLink
                    style={{ width: rem(14), height: rem(14) }}
                  />
                }
                component="a"
                href="https://bigenc.ru/c/ostrovskii-aleksandr-nikolaevich-c697e2"
                target="_blank"
              >
                Островский
              </Menu.Item>
              <Menu.Item
                rightSection={
                  <IconExternalLink
                    style={{ width: rem(14), height: rem(14) }}
                  />
                }
                component="a"
                href="https://bigenc.ru/c/prishvin-mikhail-mikhailovich-893107"
                target="_blank"
              >
                Пришвин
              </Menu.Item>
              <Menu.Item
                rightSection={
                  <IconExternalLink
                    style={{ width: rem(14), height: rem(14) }}
                  />
                }
                component="a"
                href="https://bigenc.ru/c/briusov-valerii-iakovlevich-fc6a35"
                target="_blank"
              >
                Брюсов
              </Menu.Item>
            </Menu.Dropdown>
          </Menu>
          <a
            key="#museums"
            href="#museums"
            className={cx(classes.link, {
              [classes.linkActive]: active === "#museums",
            })}
            // onClick={() => {
            //   setActive(link.link);
            // }}
          >
            Музеи
          </a>
          <Menu shadow="md" width={200}>
            <Menu.Target>
              <a
                key="Путешествия"
                href="#trips"
                className={cx(classes.link, {
                  [classes.linkActive]: active === "#trips",
                })}
                onClick={(e) => {
                  e.preventDefault();
                  // setActive("#authors");
                }}
              >
                Путешествия
              </a>
            </Menu.Target>

            <Menu.Dropdown>
              <Menu.Item
                component="a"
                href="/trips/prishvin"
              >
                Пришвин
              </Menu.Item>
            </Menu.Dropdown>
          </Menu>
        </Group>

        <Burger
          opened={openedMenu}
          onClick={menuactions.toggle}
          className={classes.burger}
          size="sm"
        />
      </Container>
      {/* Menu for mobile */}
      <Paper
        display={!openedMenu && "none"}
        radius={0}
        style={{
          position: "absolute",
          top: 60,
          left: 0,
          right: 0,
          opacity: "95%",
          padding: "10px 0 10px 1rem",
          zIndex: 10,
        }}
        className={classes.mobilemenu}
      >
        <Group spacing={5} className={classes.linksmobile}>
          <Menu shadow="md" width={200}>
            <Menu.Target>
              <a
                key="Авторы"
                href="#authors"
                className={cx(classes.link, {
                  [classes.linkActive]: active === "#authors",
                })}
                onClick={(e) => {
                  e.preventDefault();
                  // setActive("#authors");
                }}
              >
                Авторы
              </a>
            </Menu.Target>

            <Menu.Dropdown>
              <Menu.Item
                rightSection={
                  <IconExternalLink
                    style={{ width: rem(14), height: rem(14) }}
                  />
                }
                component="a"
                href="https://bigenc.ru/c/ostrovskii-aleksandr-nikolaevich-c697e2"
                target="_blank"
              >
                Островский
              </Menu.Item>
              <Menu.Item
                rightSection={
                  <IconExternalLink
                    style={{ width: rem(14), height: rem(14) }}
                  />
                }
                component="a"
                href="https://bigenc.ru/c/prishvin-mikhail-mikhailovich-893107"
                target="_blank"
              >
                Пришвин
              </Menu.Item>
              <Menu.Item
                rightSection={
                  <IconExternalLink
                    style={{ width: rem(14), height: rem(14) }}
                  />
                }
                component="a"
                href="https://bigenc.ru/c/briusov-valerii-iakovlevich-fc6a35"
                target="_blank"
              >
                Брюсов
              </Menu.Item>
            </Menu.Dropdown>
          </Menu>
          {items}
        </Group>
      </Paper>
    </Header>
  );
}
