import React, { useCallback, useMemo } from 'react';
import { format } from 'date-fns';
import type { ServiceType } from '@/types/biz.type';
import type { CardProps } from '../../atoms';
import {
  BulletText,
  Button,
  Card,
  DataList,
  Dialog,
  Flex,
  Grid,
  Heading,
} from '../../atoms';
import { Pencil1Icon } from '../../icon';
import { EditCoachingTime } from './edit-coaching-time';
import { EditServiceType } from './edit-service-type';

const preventDefault = (e: Event): void => {
  e.preventDefault();
};
export type SessionCardProps = Omit<CardProps, 'error'> & {
  error?: string;
  startAt?: Date;
  endAt?: Date;
  sessionType?: ServiceType;
  userName?: string;
  sessionNumber?: number;
  ExtraButtons?: React.ReactNode;
  editable?: boolean;
  TitleExtra?: React.ReactNode;
  onSaveDate?: (startTime: Date, endTime: Date) => void;
  onSaveSessionType?: (sessionType: string) => void;
};

export function SessionCard(props: SessionCardProps): React.ReactElement {
  const {
    sessionNumber,
    userName,
    error,
    ExtraButtons,
    TitleExtra,
    editable,
    onSaveDate,
    onSaveSessionType,
    startAt,
    endAt,
    sessionType,
    ...rest
  } = props;

  const renderEditButton = useCallback((): JSX.Element => {
    return (
      <Button color="gray" ml="2" variant="transparent">
        <Pencil1Icon />
      </Button>
    );
  }, []);

  const sessionTimeStr = useMemo(() => {
    if (!startAt || !endAt) return '알 수 없음';

    return `${format(startAt, 'yyyy년 MM월 dd일 HH시 mm분')} ~ ${format(endAt, 'HH시 mm분')}`;
  }, [startAt, endAt]);

  return (
    <Card error={Boolean(error)} {...rest}>
      <Flex direction="column" gap="3">
        <Flex align="center" width="100%">
          <Heading variant="heading4">
            {`${userName || '알 수 없음'}님 ${sessionNumber || '-'}회차`}
          </Heading>
          {TitleExtra}
          {error ? (
            <BulletText as="p" color="red" variant="caption">
              {error}
            </BulletText>
          ) : null}
        </Flex>
        <DataList.Root>
          <DataList.Item>
            <DataList.Label>코칭 일시</DataList.Label>
            <DataList.Value>
              {sessionTimeStr}
              {editable ? (
                <Dialog.Root>
                  <Dialog.Trigger>{renderEditButton()}</Dialog.Trigger>
                  <Dialog.Content
                    onOpenAutoFocus={preventDefault}
                    style={{ overflow: 'visible' }}
                    title={`${sessionNumber}회차 세션 일시 변경하기`}
                  >
                    <EditCoachingTime
                      defaultEndAt={endAt}
                      defaultStartAt={startAt}
                      onClickSave={onSaveDate}
                    />
                  </Dialog.Content>
                </Dialog.Root>
              ) : null}
            </DataList.Value>
          </DataList.Item>
          <Grid columns={{ initial: '1', xs: '2' }} style={{ gap: 'inherit' }}>
            <DataList.Item>
              <DataList.Label>세션 참여 방식</DataList.Label>
              <DataList.Value>
                {sessionType === 'offlineCoaching' ? '오프라인' : '온라인'}
                {editable ? (
                  <Dialog.Root>
                    <Dialog.Trigger>{renderEditButton()}</Dialog.Trigger>
                    <Dialog.Content
                      title={`${sessionNumber}회차 세션 진행 방식 변경하기`}
                    >
                      <EditServiceType
                        defaultServiceType={sessionType}
                        onClickSave={onSaveSessionType}
                      />
                    </Dialog.Content>
                  </Dialog.Root>
                ) : null}
              </DataList.Value>
            </DataList.Item>

            <Flex gap="2" justify="end">
              {ExtraButtons}
            </Flex>
          </Grid>
        </DataList.Root>
      </Flex>
    </Card>
  );
}
