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

const meta = {
  title: 'Components/Modal/AlertModal',
  component: AlertModal,
} satisfies Meta<typeof AlertModal>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: function Render() {
    const [isOpen, setIsOpen] = useState(false)
    return (
      <>
        <Button onClick={() => setIsOpen(true)}>알림 모달 열기</Button>
        <AlertModal
          isOpen={isOpen}
          onOpenChange={setIsOpen}
          title="알림"
          content="작업이 완료되었습니다."
          onConfirm={() => console.log('확인 클릭')}
        />
      </>
    )
  },
}

export const WithoutTitle: Story = {
  render: function Render() {
    const [isOpen, setIsOpen] = useState(false)
    return (
      <>
        <Button onClick={() => setIsOpen(true)}>알림 모달 열기</Button>
        <AlertModal
          isOpen={isOpen}
          onOpenChange={setIsOpen}
          content="제목 없는 알림 메시지입니다."
          onConfirm={() => console.log('확인 클릭')}
        />
      </>
    )
  },
}

export const CustomConfirmText: Story = {
  render: function Render() {
    const [isOpen, setIsOpen] = useState(false)
    return (
      <>
        <Button onClick={() => setIsOpen(true)}>알림 모달 열기</Button>
        <AlertModal
          isOpen={isOpen}
          onOpenChange={setIsOpen}
          title="알림"
          content="파일이 성공적으로 업로드되었습니다."
          confirmText="닫기"
          onConfirm={() => console.log('닫기 클릭')}
        />
      </>
    )
  },
}

export const MultilineContent: Story = {
  render: function Render() {
    const [isOpen, setIsOpen] = useState(false)
    return (
      <>
        <Button onClick={() => setIsOpen(true)}>알림 모달 열기</Button>
        <AlertModal
          isOpen={isOpen}
          onOpenChange={setIsOpen}
          title="안내"
          content={`처리가 완료되었습니다.\n\n총 3개의 파일이 업로드되었습니다.\n업로드된 파일은 목록에서 확인하실 수 있습니다.`}
          onConfirm={() => console.log('확인 클릭')}
        />
      </>
    )
  },
}

const confirmMeta = {
  title: 'Components/Modal/ConfirmModal',
  component: ConfirmModal,
} satisfies Meta<typeof ConfirmModal>

export const Confirm: StoryObj<typeof ConfirmModal> = {
  render: function Render() {
    const [isOpen, setIsOpen] = useState(false)
    return (
      <>
        <Button onClick={() => setIsOpen(true)}>확인 모달 열기</Button>
        <ConfirmModal
          isOpen={isOpen}
          onOpenChange={setIsOpen}
          title="확인"
          content="정말 삭제하시겠습니까?"
          onConfirm={() => console.log('삭제 확인')}
          onCancel={() => console.log('취소 클릭')}
        />
      </>
    )
  },
}

export const ConfirmWithCustomText: StoryObj<typeof ConfirmModal> = {
  render: function Render() {
    const [isOpen, setIsOpen] = useState(false)
    return (
      <>
        <Button onClick={() => setIsOpen(true)}>확인 모달 열기</Button>
        <ConfirmModal
          isOpen={isOpen}
          onOpenChange={setIsOpen}
          title="저장 확인"
          content="변경사항을 저장하시겠습니까?"
          confirmText="저장"
          cancelText="저장 안 함"
          onConfirm={() => console.log('저장 확인')}
          onCancel={() => console.log('저장 안 함 클릭')}
        />
      </>
    )
  },
}

export const ConfirmWithAsyncAction: StoryObj<typeof ConfirmModal> = {
  render: function Render() {
    const [isOpen, setIsOpen] = useState(false)
    const handleConfirm = async () => {
      await new Promise((resolve) => setTimeout(resolve, 2000))
      console.log('비동기 작업 완료')
    }
    return (
      <>
        <Button onClick={() => setIsOpen(true)}>확인 모달 열기</Button>
        <ConfirmModal
          isOpen={isOpen}
          onOpenChange={setIsOpen}
          title="삭제 확인"
          content="삭제하면 복구할 수 없습니다. 계속하시겠습니까?"
          confirmText="삭제"
          cancelText="취소"
          onConfirm={handleConfirm}
        />
      </>
    )
  },
}