import { Button, Card, Statistic, Typography } from "antd";
import type { IEventInfo } from "../types";
import dayjs from "dayjs";
import { CalendarOutlined, EyeOutlined } from "@ant-design/icons";
import { useCallback } from "react";
import { useNavigate } from "react-router";

interface EventCardProps {
  eventInfo: IEventInfo;
}

export function EventCard(props: EventCardProps) {
  const { eventInfo: e } = props;
  const day = dayjs(e.startDate);
  const navigate = useNavigate();
  const handleView = useCallback(() => {
    navigate(`/event/${e.matchId}`);
  }, [e]);
  const handleAddCalendar = useCallback(() => {
    const url = `${window.location.origin}/calendar/event/${e.matchId}/events.ics`;
    const uri = url.replace(/^http(s)?/, 'webcal');
    window.open(uri);
  }, [e]);
  return (
    <Card
      key={e.matchId}
      title={e.title}
      style={{ width: '100%' }}
      actions={[
        <Button
          type="link"
          icon={<CalendarOutlined />}
          onClick={handleAddCalendar}
        >
          加入日历
        </Button>,
        <Button
          type="link"
          onClick={handleView}
          icon={<EyeOutlined  />}
        >
          查看
        </Button>,
      ]}
    >
      <Typography.Text type={e.isFinished ? undefined : 'success'}>{e.title}</Typography.Text>
      <Statistic.Timer
        type={e.isFinished ? 'countup' : 'countdown'}
        value={day.toDate().getTime()}
        format={`距离比赛${e.isFinished ? '结束' : '开始'}: DD 天${e.isFinished ? '' : ' HH 时'}`}
        styles={{ content: e.isFinished ? { color: 'gray' } : {} }}
      />
      {e.info.map(e => (
        <div key={e}>
          <Typography.Text type='secondary'>{e}</Typography.Text>
        </div>
      ))}
    </Card>
  )
}