import { logout } from '@/rtk/dispatches/auth'
import { useAppDispatch, useAppSelector } from '@/rtk/hooks'
import {
  Avatar,
  Burger,
  Container,
  Group,
  Menu,
  Tabs,
  Text,
  UnstyledButton,
  rem,
} from '@mantine/core'
import { MantineLogo } from '@mantine/ds'
import { useDisclosure } from '@mantine/hooks'
import {
  IconChevronDown,
  IconLogout,
  IconSettings,
  IconSwitchHorizontal,
} from '@tabler/icons-react'
import cx from 'clsx'
import { useCallback, useState } from 'react'
import { ColorSchemeToggle } from '../ColorSchemeToggle/ColorSchemeToggle'
import LanguagePicker from '../LanguagePicker/LanguagePicker'
import * as classes from './DoubleHeader.module.css.ts'
import { useNavigate } from 'react-router-dom'

// const user = {
//   name: 'Jane Spoonfighter',
//   email: 'janspoon@fighter.dev',
//   image: 'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-5.png',
// };

const tabs = ['Home', 'Page 1', 'Page 2', 'Page 3', 'Page 4', 'Page 5']

const Header = ({
  header,
  setHeader,
}: {
  header: string
  setHeader: (newHeader: string) => void
}) => {
  const [opened, { toggle }] = useDisclosure(false)
  const [userMenuOpened, setUserMenuOpened] = useState(false)
  const dispatch = useAppDispatch()
  const navigate = useNavigate()
  const user = useAppSelector((state) => state.authentication.user.user)

  const items = tabs.map((tab) => (
    <Tabs.Tab value={tab} key={tab} onClick={() => setHeader(tab)}>
      {tab}
    </Tabs.Tab>
  ))
  const handleLogout = useCallback(() => {
    dispatch(logout(navigate))
  }, [dispatch, navigate])
  return (
    <div className={classes.header}>
      <Container className={classes.mainSection} size="xl">
        <Group justify="space-between">
          <MantineLogo size={28} />

          <Burger opened={opened} onClick={toggle} hiddenFrom="xs" size="sm" />

          <Group>
            <LanguagePicker />

            <ColorSchemeToggle />
            <Menu
              width={260}
              position="bottom-end"
              transitionProps={{ transition: 'pop-top-right' }}
              onClose={() => setUserMenuOpened(false)}
              onOpen={() => setUserMenuOpened(true)}
              withinPortal
            >
              <Menu.Target>
                <UnstyledButton
                  className={cx(classes.user, {
                    [classes.userActive]: userMenuOpened,
                  })}
                >
                  <Group gap={7}>
                    <Avatar
                      src={
                        'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-5.png'
                      }
                      alt={user.name}
                      radius="xl"
                      size={25}
                    />
                    <Text fw={500} size="sm" lh={1} mr={3}>
                      {user.name}
                    </Text>
                    <IconChevronDown
                      style={{ width: rem(12), height: rem(12) }}
                      stroke={1.5}
                    />
                  </Group>
                </UnstyledButton>
              </Menu.Target>
              <Menu.Dropdown>
                {/* <Menu.Item
                leftSection={
                  <IconHeart
                    style={{ width: rem(16), height: rem(16) }}
                    color={theme.colors.red[6]}
                    stroke={1.5}
                  />
                }
              >
                Liked posts
              </Menu.Item>
              <Menu.Item
                leftSection={
                  <IconStar
                    style={{ width: rem(16), height: rem(16) }}
                    color={theme.colors.yellow[6]}
                    stroke={1.5}
                  />
                }
              >
                Saved posts
              </Menu.Item>
              <Menu.Item
                leftSection={
                  <IconMessage
                    style={{ width: rem(16), height: rem(16) }}
                    color={theme.colors.blue[6]}
                    stroke={1.5}
                  />
                }
              >
                Your comments
              </Menu.Item> */}

                <Menu.Label>Settings</Menu.Label>
                <Menu.Item
                  leftSection={
                    <IconSettings
                      style={{ width: rem(16), height: rem(16) }}
                      stroke={1.5}
                    />
                  }
                >
                  Account settings
                </Menu.Item>
                <Menu.Item
                  leftSection={
                    <IconSwitchHorizontal
                      style={{ width: rem(16), height: rem(16) }}
                      stroke={1.5}
                    />
                  }
                >
                  Change account
                </Menu.Item>
                <Menu.Item
                  leftSection={
                    <IconLogout
                      style={{ width: rem(16), height: rem(16) }}
                      stroke={1.5}
                    />
                  }
                  onClick={handleLogout}
                >
                  Logout
                </Menu.Item>

                {/* <Menu.Divider />

              <Menu.Label>Danger zone</Menu.Label>
              <Menu.Item
                leftSection={
                  <IconPlayerPause style={{ width: rem(16), height: rem(16) }} stroke={1.5} />
                }
              >
                Pause subscription
              </Menu.Item>
              <Menu.Item
                color="red"
                leftSection={<IconTrash style={{ width: rem(16), height: rem(16) }} stroke={1.5} />}
              >
                Delete account
              </Menu.Item> */}
              </Menu.Dropdown>
            </Menu>
          </Group>
        </Group>
      </Container>
      <Container size="md">
        <Tabs
          defaultValue={header}
          variant="outline"
          visibleFrom="sm"
          classNames={{
            // root: classes.tab.active,
            list: classes.tabsList,
            tab: classes.tab.default,
          }}
        >
          <Tabs.List justify="center">{items}</Tabs.List>
        </Tabs>
      </Container>
    </div>
  )
}

export default Header
