'use client'

import { useEffect, useState } from 'react'

import Link from 'next/link'

import { useRecoilState } from 'recoil'
import { modalContent, modalState } from '@/store/modalAtom'

import { useAxios } from '@/hooks/useAxios'

import { Button } from '@nextui-org/react'

import SingleDatePicker from './common/datepicker/SingleDatePicker'
import RangeDatePicker from './common/datepicker/RangeDatePicker'
import QGrid from './common/grid/QGrid'
import { toastUp } from '@/hooks/useToast'

export default function Intro() {
  const { get } = useAxios()

  // const [open, setOpen] = useState(false)
  const [startDate, setStartDate] = useState(new Date())
  const singleDatePickerProps = {
    startDate,
    setStartDate,
  }

  const [dateRange, setDateRange] = useState([null, null])
  const [startRangeDate, endRangeDate] = dateRange
  const rangeDatePickerProps = {
    startRangeDate,
    endRangeDate,
    setDateRange,
  }

  // const  gridProps = {
  //   isPageable: false,
  // }
  const [gridProps, setGridProps] = useState({
    gridData: [],
    isPageable: false,
  })

  const [open, setOpen] = useRecoilState(modalState)
  const [contents, setContent] = useRecoilState(modalContent)

  const modelProps = {
    open,
    setOpen,
  }

  const ipsum = (
    <>
      <p className="text-2xl">title</p>
      <p>
        저작자·발명가·과학기술자와 예술가의 권리는 법률로써 보호한다. 이 헌법은 1988년 2월 25일부터 시행한다. 다만, 이 헌법을 시행하기 위하여 필요한
        법률의 제정·개정과 이 헌법에 의한 대통령 및 국회의원의 선거 기타 이 헌법시행에 관한 준비는 이 헌법시행 전에 할 수 있다.
      </p>
      <p>
        국가는 주택개발정책등을 통하여 모든 국민이 쾌적한 주거생활을 할 수 있도록 노력하여야 한다. 통신·방송의 시설기준과 신문의 기능을 보장하기
        위하여 필요한 사항은 법률로 정한다.
      </p>
      <p>
        국회에서 의결된 법률안은 정부에 이송되어 15일 이내에 대통령이 공포한다. 선거에 관한 경비는 법률이 정하는 경우를 제외하고는 정당 또는
        후보자에게 부담시킬 수 없다.
      </p>
    </>
  )

  useEffect(() => {
    async function fetchData() {
      // const response = await fetch('https://www.ag-grid.com/example-assets/space-mission-data.json')
      // const data = await response.json()
      const data = await get({ url: 'https://www.ag-grid.com/example-assets/space-mission-data.json' })
      setGridProps({ ...gridProps, gridData: data })
    }
    fetchData()
  }, [])

  return (
    <>
      <div className="text-2xl">
        <Link href={'/login'}>
          <Button color="primary">로그인 페이지로 이동</Button>
        </Link>
      </div>
      <div className="my-2">
        <div className="text-2xl">Single Date Picker</div>
        <div>
          <SingleDatePicker {...singleDatePickerProps} />
        </div>
      </div>
      <div className="my-2">
        <div className="text-2xl">Range Date Picker</div>
        <div>
          <RangeDatePicker {...rangeDatePickerProps} />
        </div>
      </div>
      <div className="my-2">
        <div className="text-2xl">QGrid</div>
        <div>
          <QGrid {...gridProps} />
        </div>
      </div>
      <div className="my-2">
        <div className="text-2xl">QModal</div>
        <div>
          {/* <Button color="primary" onClick={() => setOpen(true)}>
            Open Modal
          </Button>
          <QModal {...modelProps}>{ipsum}</QModal> */}
          <Button
            color="primary"
            onClick={() => {
              setContent(ipsum)
              setOpen(true)
            }}
          >
            Open Modal
          </Button>
        </div>
      </div>
      <div className="my-2">
        <div className="text-2xl">QToast</div>
        <div>
          <Button
            color="primary"
            onClick={() => {
              toastUp({
                message: 'This is a toast message',
                type: 'success',
              })
            }}
          >
            Open Toast
          </Button>
        </div>
      </div>
    </>
  )
}