'use client'

import { useRef, useState } from 'react'
import { Button } from '@nextui-org/react'
import ColorPicker from './common/color-picker/ColorPicker'

import { useAxios } from '@/hooks/useAxios'
import { useMessage } from '@/hooks/useMessage'
import { convertDwgToPng } from '@/lib/cadAction'
// import { get } from '@/lib/Axios'

import QSelect from '@/components/ui/QSelect'

import styles from './playground.module.css'
import { useRecoilState } from 'recoil'
import { cadFileNameState, useCadFileState } from '@/store/canvasAtom'
import { toastUp } from '@/hooks/useToast'

export default function Playground() {
  const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
  const [cadFileName, setCadFileName] = useRecoilState(cadFileNameState)
  const fileRef = useRef(null)
  const { get, promisePost } = useAxios()
  const testVar = process.env.NEXT_PUBLIC_TEST
  const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
  const { getMessage } = useMessage()

  const [color, setColor] = useState('#ff0000')

  const handleUsers = async () => {
    // const users = await get('/api/user/find-all')
    const params = {
      url: '/api/user/find-all',
    }
    const users = await get(params)
    console.log('users', users)
  }

  const handleConvert = async () => {
    console.log('file', fileRef.current.files[0])

    const formData = new FormData()
    formData.append('file', fileRef.current.files[0])

    await promisePost({ url: converterUrl, data: formData })
      .then((res) => {
        console.log('response: ', res)
        convertDwgToPng(res.data.Files[0].FileName, res.data.Files[0].FileData)
        setUseCadFile(true)
        setCadFileName(res.data.Files[0].FileName)
        toastUp({ message: '파일 변환 완료', type: 'success' })
      })
      .catch((err) => {
        console.error(err)
        toastUp({ message: '파일 변환 실패', type: 'error' })
      })
  }

  const data = [
    {
      id: 1,
      author: 'SWYOO',
      contents: '버튼 정리(템플릿 적용)',
      date: '2024.07.16',
    },
    {
      id: 2,
      author: 'SWYOO',
      contents: 'README.md 파일 이미지 경로 수정',
      date: '2024.07.17',
    },
    {
      id: 3,
      author: 'SWYOO',
      contents: '',
      date: '',
    },
  ]
  return (
    <>
      <div className="container mx-auto p-4 m-4 border">
        <div className={styles.test}>이 영역은 테스트입니다.</div>
        <div className="m-2">
          <QSelect />
        </div>
        <div className="w-full bg-orange-300 m-2">{testVar}</div>
        <div>
          <div className="m-2">
            <Button onClick={handleUsers}>Button</Button>
          </div>
        </div>
        <div className="test">
          <p className="text-white">Sass 테스트입니다.</p>
        </div>
        <div>{getMessage('hi')}</div>
        <div>
          <h1>React ColorPicker</h1>
          <ColorPicker color={color} setColor={setColor} />
          <div className="p-4">{color}</div>
        </div>
        <div>
          <input type="file" name="file" ref={fileRef} />
          <div>
            <Button onClick={handleConvert}>Convert</Button>
          </div>
        </div>
      </div>
    </>
  )
}