import { Button, Drawer, Flex, Select } from 'antd';
import type React from 'react';
import { clubs } from './clubList';
import { useCallback, useEffect, useState } from 'react';
import { ClubEvenList } from '../ClubEventList';
import { SearchOutlined } from '@ant-design/icons';
import { useClubStore } from '../../store/useClubStore';
import { ClubSearchTable } from '../ClubSearchTable';
import styled, { createGlobalStyle } from 'styled-components';
import { useLocalStorageState } from 'ahooks';
import { CLUB_SELECTOR_KEY } from '../../utils/constants';
import { ClubSummary } from '../ClubSummary';

interface Props {
}
const defaultOptions = clubs.map(e => ({
  label: e.name,
  value: e.clubId,
}));

const ChangeDrawerHeight = createGlobalStyle`
  .ant-drawer-content-wrapper:has(div.search-table) {
    max-height: 720px;
  }
`;

const StyledContainer = styled.div`
  .club-selector {
    width: 100%;
  }
`;

export const GameSelector: React.FC<Props> = () => {
  const [options, setOptions] = useState<{ label: React.ReactNode, value: string }[]>(defaultOptions);
  const [clubId, setClubId] = useLocalStorageState<string>(CLUB_SELECTOR_KEY, { defaultValue: clubs[0]?.clubId ?? '' });
  const clubStore = useClubStore(store => store);
  const handleClubChange = useCallback(async (id: string) => {
    setClubId(id);
  }, []);
  const [searchOpen, setSearchOpen] = useState(false);
  useEffect(() => {
    if (clubStore.clubs.length) {
      setOptions([...defaultOptions, ...clubStore.clubs.map(info => ({
        label: info.name,
        value: info.id
      }))]);
      return;
    }
    setOptions(defaultOptions);
    setClubId(defaultOptions[0]?.value ?? '');
  }, [clubStore]);
  return (
    <StyledContainer style={{ width: '100%' }}>
      <ChangeDrawerHeight />
      <div style={{ display: 'block', marginBottom: 12 }}>
        <Flex wrap gap={12} justify='center' align='center'>
          <Flex flex={4}>
            <Select
              className='club-selector'
              placeholder={'请选择俱乐部'}
              size='large'
              value={clubId}
              options={options}
              onChange={handleClubChange}
            />
          </Flex>
          <Flex flex={1}>
            <Button block size='large' icon={<SearchOutlined />} onClick={() => setSearchOpen(true)}>
              查找
            </Button>
          </Flex>
        </Flex>
      </div>
      <ClubSummary clubId={clubId} />
      <ClubEvenList clubId={clubId} />
      <Drawer
        className='search-table'
        open={searchOpen}
        placement='bottom'
        size={"80vh"}
        onClose={() => setSearchOpen(false)}
      >
        <ClubSearchTable
          handleClick={(type, record) => {
            switch (type) {
              case 'VIEW':
                window.open(`/club/${record.id}`);
                break;
              case 'FAV':
                if (clubStore.isFav(record.id)) {
                  clubStore.unFav(record.id);
                } else {
                  clubStore.add(record);
                }
                break;
            }
          }}
        />
      </Drawer>
    </StyledContainer>
  );
}
