import { useGetLocale, useSetLocale, useGetIdentity } from '@refinedev/core';
import {
  Layout,
  Space,
  Button,
  Dropdown,
  Avatar,
  Typography,
  theme,
  Select,
} from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { useContext } from 'react';
import { BusinessContext } from 'components/contexts/business';
import type { MenuProps } from 'antd';
import { agentAttrs } from 'components/agentPanel/agentAttributes';

type IUser = {
  id: number;
  name: string;
  avatar: string;
};

const { Text } = Typography;
const { useToken } = theme;

export const Header: React.FC = () => {
  const { i18n } = useTranslation();
  const locale = useGetLocale();
  const changeLanguage = useSetLocale();
  const { token } = useToken();
  const { data: user } = useGetIdentity<IUser>();
  const { business, setBusiness, businessList } = useContext(BusinessContext);

  const currentLocale = locale();

  const langMenu: MenuProps = {
    selectedKeys: currentLocale ? [currentLocale] : [],
    items: [...(i18n.languages || [])].sort().map((lang: string) => ({
      key: lang,
      icon: (
        <span style={{ marginRight: 8 }}>
          <Avatar size={16} src={`/images/flags/${lang}.svg`} />
        </span>
      ),
      label: lang === 'en' ? 'English' : '中文',
    })),
    onClick: ({ key: lang }) => changeLanguage(lang),
  };

  const headerStyles: React.CSSProperties = {
    backgroundColor: token.colorBgElevated,
    display: 'flex',
    justifyContent: 'flex-end',
    alignItems: 'center',
    padding: '0px 24px',
    height: '64px',
    position: 'sticky',
    top: 0,
    zIndex: 999,
  };

  return (
    <Layout.Header style={headerStyles} {...agentAttrs({ type: 'app-header' })}>
      {/* <Select
        showSearch
        defaultValue={business.gameId}
        style={{ width: 160 }}
        variant="borderless"
        options={[
          ...businessList.map((item) => ({
            label: item.gameName,
            value: item.gameId,
          })),
          {
            label: '管理员专用',
            options: [{ value: '-1', label: 'All games' }],
          },
        ]}
        optionFilterProp="label"
        onChange={(gameId) => {
          const gameInfo =
            gameId === '-1'
              ? { gameId: '-1', gameName: 'All games' }
              : businessList.find((item) => item.gameId === gameId)!;
          setBusiness(gameInfo);
          window.location.reload();
        }}
      /> */}
      <Dropdown menu={langMenu}>
        <Button type="link">
          <Space>
            <Avatar size={16} src={`/images/flags/${currentLocale}.svg`} />
            {currentLocale === 'en' ? 'English' : '中文'}
            <DownOutlined />
          </Space>
        </Button>
      </Dropdown>
      <Space style={{ marginLeft: '8px' }} size="middle">
        {user?.name && <Text strong>{user.name}</Text>}
        {user?.avatar && <Avatar src={user?.avatar} alt={user?.name} />}
      </Space>
    </Layout.Header>
  );
};
