'use client'

import { Button } from '@/components/button'
import { Checkbox, CheckboxField } from '@/components/checkbox'
import { Dialog, DialogActions, DialogBody, DialogDescription, DialogTitle } from '@/components/dialog'
import { Description, Field, FieldGroup, Label } from '@/components/fieldset'
import { Input } from '@/components/input'
import { useState } from 'react'

export function RefundOrder({
  amount,
  cancellationReason,
  ...props
}: {
  amount: string
  cancellationReason?: string // 옵셔널 스트링으로 타입 정의
} & React.ComponentPropsWithoutRef<typeof Button>) {
  let [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <Button type="button" onClick={() => setIsOpen(true)} {...props} />
      <Dialog open={isOpen} onClose={setIsOpen}>
        <DialogTitle>Approve Refund</DialogTitle>
        <DialogDescription>
          환불 처리가 완료되면 영업일 기준 2~3일 내에 고객의 결제 수단으로 환불 금액이 반영됩니다. 알림 옵션을 선택하면
          고객에게 이메일이 발송됩니다.
        </DialogDescription>
        <DialogBody>
          <FieldGroup>
            <Field>
              <Label>Amount (환불 금액)</Label>
              <Input name="amount" defaultValue={amount} placeholder="$0.00" autoFocus />
            </Field>

            <Field>
              <Label>Cancellation Reason (고객 취소 사유)</Label>
              <Input
                name="reason"
                defaultValue={cancellationReason || '사유 없음'}
                readOnly
                className="bg-zinc-50 text-zinc-500"
              />
            </Field>

            <CheckboxField>
              {/* 기본으로 체크된 상태로 설정 */}
              <Checkbox name="notify" defaultChecked />
              <Label>Notify customer</Label>
              <Description>환불 완료 이메일 알림이 고객에게 발송됩니다.</Description>
            </CheckboxField>
          </FieldGroup>
        </DialogBody>
        <DialogActions>
          <Button plain onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
          <Button onClick={() => setIsOpen(false)}>Refund</Button>
        </DialogActions>
      </Dialog>
    </>
  )
}
