import type { Meta, StoryObj } from '@storybook/react'
import React, { useState } from 'react'
import { Button } from './Button'
import { ConfirmModal, Modal } from './Modal'

const meta: Meta = {
  title: 'Components/Modal',
  parameters: { layout: 'centered' },
}
export default meta

export const BasicModal: StoryObj = {
  render: () => {
    const [open, setOpen] = useState(false)
    return (
      <>
        <Button onClick={() => setOpen(true)}>모달 열기</Button>
        <Modal open={open} onClose={() => setOpen(false)} title="도구 삭제">
          <p>"회의록 요약 도구"를 삭제하시겠습니까?<br />이 작업은 되돌릴 수 없습니다.</p>
          <div className="flex justify-end gap-2 mt-5">
            <Button variant="ghost" onClick={() => setOpen(false)}>취소</Button>
            <Button variant="danger" onClick={() => setOpen(false)}>삭제</Button>
          </div>
        </Modal>
      </>
    )
  },
}

export const DeleteConfirm: StoryObj = {
  render: () => {
    const [open, setOpen] = useState(false)
    return (
      <>
        <Button variant="danger" onClick={() => setOpen(true)}>삭제 확인</Button>
        <ConfirmModal
          open={open}
          onClose={() => setOpen(false)}
          onConfirm={() => setOpen(false)}
          title="프리셋을 삭제하시겠습니까?"
          description='"기본 요약 프리셋"이 영구적으로 삭제됩니다. 이 작업은 되돌릴 수 없습니다.'
          variant="delete"
          confirmLabel="삭제"
        />
      </>
    )
  },
}

export const ResetConfirm: StoryObj = {
  render: () => {
    const [open, setOpen] = useState(false)
    return (
      <>
        <Button variant="outline" onClick={() => setOpen(true)}>초기화 확인</Button>
        <ConfirmModal
          open={open}
          onClose={() => setOpen(false)}
          onConfirm={() => setOpen(false)}
          title="설정을 초기화하시겠습니까?"
          description="모든 설정이 기본값으로 초기화됩니다."
          variant="reset"
          confirmLabel="초기화"
        />
      </>
    )
  },
}