import { Avatar, Button, Drawer, Dropdown, Flex, Skeleton, Typography } from "antd";
import { ChangeBackground } from "./ChangeBackground";
import { useMemo, useState } from "react";
import { useRequest } from "ahooks";
import type { ClubDetail } from "../types";
import { MapType, openWebMapRaw } from "../utils/front";
import type { ItemType } from "antd/es/menu/interface";
import { NotificationOutlined, PushpinOutlined } from "@ant-design/icons";

interface Props {
  clubId: string;
}

export const ClubSummary = (props: Props) => {
  const [isArticleOpen, setIsArticleOpen] = useState(false);
  const requestClubSummary = useRequest<ClubDetail, []>(async () => {
    return fetch(`/api/club/${props.clubId}`).then(r => r.json()).catch(() => null);
  }, { manual: false, refreshDeps: [props.clubId], debounceWait: 300 })
  const info = useMemo(() => requestClubSummary.data, [requestClubSummary]);
  const noArticle = !info?.article || info.article === '还没有公告';
  const mapMenu = useMemo<ItemType[]>(() => {
    if (!info) return [];
    return [
      {
        label: 'Google 地图',
        key: MapType.GOOGLE,
      },
      {
        label: 'Apple 地图',
        key: MapType.APPLE,
      },
      {
        label: '高德地图',
        key: MapType.AMAP,
      },
      {
        label: '腾讯地图',
        key: MapType.TENCENT,
      },
      {
        label: '百度地图',
        key: MapType.BAIDU,
      },
    ]
  }, [info]);
  if (requestClubSummary.data === null) return null;
  return (
    <div style={{ width: '100%' }}>
      {requestClubSummary.loading ? (
        <Skeleton.Button block size="large" style={{ height: 300 }} active={requestClubSummary.loading} />
      ) : (
        <Flex vertical align="center" justify="center">
          <ChangeBackground url={info?.img} />
          <Avatar src={info?.img} size={80} />
          <Typography.Title level={2}>{info?.name}</Typography.Title>
            <Flex gap={12}>
              {noArticle ? null : (
                <Button icon={<NotificationOutlined />} onClick={() => setIsArticleOpen(true)}>查看公告</Button>
              )}
              {info?.geo && (
                <Dropdown
                  trigger={['click']}
                  menu={{
                    items: mapMenu,
                    onClick: (e) => openWebMapRaw(e.key as MapType, {
                      ...info.geo!,
                    }),
                  }}
                >
                  <Button icon={<PushpinOutlined />}>
                    查看位置
                  </Button>
                </Dropdown>
              )}
            </Flex>
          <Drawer
            className="club-article"
            size={'60vh'}
            open={isArticleOpen}
            onClose={() => setIsArticleOpen(false)}
            placement="top"
            title={<div style={{ textAlign: 'center' }}>{info?.name}</div>}
          >
            <div style={{ textAlign: 'center' }}>
              <Typography.Paragraph style={{ whiteSpace: 'pre', textWrap: 'auto' }}>{info?.article}</Typography.Paragraph>
            </div>
          </Drawer>
        </Flex>
      )}
    </div>
  );
}