import { useBasedTranslation } from '@based/i18n'
import { Button, type IconProps, Menu, Text, radius } from '@based/ui'
import { styled } from 'inlines'
import { useEffect, useState } from 'react'
import { useRouter } from 'react-router5'
import { handleClickOpenURL } from '../helpers'
import type { TranslationsType } from '../i18n'
import { useTypedRoute } from '../router'
import { Title } from './title'

export const Header = ({
  title,
  subtitle,
  description,
  buttons,
  menu,
}: Based.UI.Playground.Content.Header) => {
  const { params } = useTypedRoute()
  const t = useBasedTranslation<TranslationsType>()
  const { section, component } = params
  const router = useRouter()
  const isColors = section === 'colors'
  const [colorMode, setColorMode] = useState(menu?.label)

  useEffect(() => {
    if (isColors) {
      const getLabelById = (id: string): string | undefined => {
        const foundItem = menu?.items.find((item) => item.id === id)
        return foundItem?.label
      }

      if (menu?.label && !component) {
        setColorMode(menu?.label)
      }

      if ((!component && menu?.label) || !getLabelById(component)) {
        handleChangeComponent('name')
      }

      if (component) {
        setColorMode(getLabelById(component))
      }
    }
  }, [isColors, menu?.label, menu?.items, component])

  const handleChangeComponent = (component: string) =>
    router.navigate('components', {
      section,
      component,
    })

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 72,
      }}
    >
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: 16,
        }}
      >
        <Title>{title}</Title>
        {subtitle && (
          <Text variant="subheading-regular" color="neutral60">
            {subtitle}
          </Text>
        )}

        {(buttons || menu) && (
          <div
            style={{
              display: 'flex',
              flexDirection: 'row',
              gap: 8,
            }}
          >
            {menu?.items && (
              <Menu>
                <Menu.Trigger>
                  {({ open }) => (
                    <styled.div
                      data-open={open}
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: 8,
                        borderRadius: radius[8],
                        height: 24,
                        cursor: 'pointer',
                      }}
                    >
                      <Button
                        variant="border"
                        size="small"
                        color="neutral"
                        trailIcon="tiny-chevron-down"
                      >
                        {colorMode}
                      </Button>
                    </styled.div>
                  )}
                </Menu.Trigger>
                {menu.items && menu.items.length > 0 && (
                  <Menu.Items>
                    {menu.items?.map((item) => (
                      <Menu.Item
                        key={item.id}
                        leadIcon={
                          component === item.id ? 'checkmark' : undefined
                        }
                        indentContent={true}
                        onClick={() => {
                          handleChangeComponent(item.id)
                          setColorMode(item.label)
                        }}
                      >
                        {item.label}
                      </Menu.Item>
                    ))}
                  </Menu.Items>
                )}
              </Menu>
            )}

            {buttons &&
              buttons?.length > 0 &&
              buttons?.map((button, index) => (
                <Button
                  key={index}
                  variant="border"
                  size="small"
                  color="neutral"
                  trailIcon={(button.icon as IconProps['variant']) || ''}
                  onClick={() => {
                    if (button.url) {
                      handleClickOpenURL(button.url)
                    }
                  }}
                >
                  {button.label}
                </Button>
              ))}
          </div>
        )}
      </div>

      {description && (
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: 8,
          }}
        >
          <Text variant="subheading-bold" color="neutral100">
            {t('content.about')}
          </Text>
          <Text variant="display-regular" color="neutral60">
            {description}
          </Text>
        </div>
      )}
    </div>
  )
}
