import React, { useCallback, useState } from 'react';
import { Box, Button, Dialog, Flex, Typo } from '@/atoms';
import type { ServiceType } from '@/types/biz.type';
import { OnOfflineRadioCard } from './on-offline-radio-card';

export interface EditServiceTypeProps {
  defaultServiceType?: ServiceType;
  onClickSave?: (serviceType: ServiceType) => void;
  onClickCancel?: () => void;
}

export function EditServiceType(
  props: EditServiceTypeProps
): React.ReactNode {
  const { defaultServiceType, onClickCancel } = props;
  const [sessionType, setSessionType] = useState<string | undefined>(
    defaultServiceType
  );

  const onClickSave = useCallback(() => {
    props.onClickSave?.(sessionType as ServiceType);
  }, [props, sessionType]);

  return (
    <Box>
      <Typo
        as="p"
        color="gray"
        mb={{ initial: '5', xs: '3' }}
        variant="caption"
      >
        세션 유형에 따라 책정되는 코칭 금액이 달라지므로, 정확하게 선택해주세요
      </Typo>
      <OnOfflineRadioCard onValueChange={setSessionType} value={sessionType} />
      <Flex gap="3" justify="end" mt={{ initial: '6', xs: '3' }}>
        <Dialog.Close>
          <Button color="gray" onClick={onClickCancel} variant="outline">
            취소하기
          </Button>
        </Dialog.Close>
        <Dialog.Close>
          <Button onClick={onClickSave}>저장하기</Button>
        </Dialog.Close>
      </Flex>
    </Box>
  );
}
