qcast-front/src/components/Playground.jsx

'use client'

import { useRef, useState, useEffect } from 'react'
import { useRecoilState } from 'recoil'
import { v4 as uuidv4 } from 'uuid'
import { FaAnglesUp } from 'react-icons/fa6'
import { FaAnglesDown } from 'react-icons/fa6'

import { useAxios } from '@/hooks/useAxios'
import { useMessage } from '@/hooks/useMessage'
import { convertDwgToPng } from '@/lib/cadAction'
import { cadFileNameState, googleMapFileNameState, useCadFileState, useGoogleMapFileState } from '@/store/canvasAtom'

import { Button } from '@nextui-org/react'
import ColorPicker from './common/color-picker/ColorPicker'
import { useSwal } from '@/hooks/useSwal'

import styles from './playground.module.css'
import Image from 'next/image'

import QInput from './common/input/Qinput'
import QSelect from './common/select/QSelect'
import QPagination from './common/pagination/QPagination'

export default function Playground() {
  const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
  const [cadFileName, setCadFileName] = useRecoilState(cadFileNameState)
  const [useGoogleMapFile, setUseGoogleMapFile] = useRecoilState(useGoogleMapFileState)
  const [googleMapFileName, setGoogleMapFileName] = useRecoilState(googleMapFileNameState)
  const fileRef = useRef(null)
  const queryRef = useRef(null)
  const [zoom, setZoom] = useState(20)
  const { get, promiseGet, promisePost } = useAxios()
  const testVar = process.env.NEXT_PUBLIC_TEST
  const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
  const { getMessage } = useMessage()
  const { swalFire } = useSwal()

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

  const [textInput, setTextInput] = useState('')
  const [radioInput, setRadioInput] = useState('')
  const [checkboxInput, setCheckboxInput] = useState([])
  const [selectedValue, setSelectedValue] = useState('')

  const [users, setUsers] = useState([])

  useEffect(() => {
    console.log('textInput:', textInput)
  }, [textInput])
  useEffect(() => {
    console.log('radioInput:', radioInput)
  }, [radioInput])
  useEffect(() => {
    console.log('checkboxInput:', checkboxInput)
  }, [checkboxInput])
  useEffect(() => {
    console.log('selectedValue:', selectedValue)
  }, [selectedValue])

  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)
        swalFire({ text: '파일 변환 완료' })
      })
      .catch((err) => {
        console.error(err)
        swalFire({ text: '파일 변환 실패' })
      })
  }

  const handleDownImage = async (fileName = '') => {
    const fileNm = fileName === '' ? uuidv4() : fileName
    const queryString = queryRef.current.value === '' ? '서울시 서대문구 연세로5다길 22-3 발리빌라 3층' : queryRef.current.value
    const res = await get({ url: `http://localhost:3000/api/html2canvas?q=${queryString}&fileNm=${fileNm}&zoom=${zoom}` })
    console.log('res', res)
    setGoogleMapFileName(res.fileNm)
    swalFire({ text: '이미지 저장 완료' })
    setUseGoogleMapFile(true)
  }

  const handleZoom = async (type) => {
    if (type === 'up') {
      setZoom((prevState) => prevState + 1)
    } else {
      setZoom((prevState) => prevState - 1)
    }

    await handleDownImage()
  }

  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: '',
    },
  ]

  const handleSwalAlert = () => {
    swalFire({
      text: '알림 테스트입니다.',
    })
  }

  const paginationProps = {
    pageNo: 1,
    pageSize: 10,
    pagePerBlock: 10,
    totalCount: 501,
    handleChangePage: (page) => {
      console.log('page', page)
    },
  }

  useEffect(() => {
    console.log('users:', users)
  }, [users])

  return (
    <>
      <div className="container mx-auto p-4 m-4 border">
        <div className={styles.test}>이 영역은 테스트입니다.</div>
        <div className="m-2">
          <button
            className="btn-frame deepgray"
            onClick={() => {
              setTextInput('')
            }}
          >
            QInput TextInput DATA RESET
          </button>
          <QInput type="text" value={textInput} onChange={setTextInput} />
          <QInput type="text" value={textInput} onChange={setTextInput} readOnly="true" />
          <br />
          <button
            className="btn-frame deepgray"
            onClick={() => {
              setRadioInput('')
            }}
          >
            QInput Radio DATA RESET
          </button>
          <QInput
            type="radio"
            value={radioInput}
            onChange={setRadioInput}
            options={[
              { id: 'r01', value: 'option1', name: 'Option 1' },
              { id: 'r02', value: 'option2', name: 'Option 2' },
            ]}
          />
          <br />
          <button
            className="btn-frame deepgray"
            onClick={() => {
              setCheckboxInput('')
            }}
          >
            QInput Checkbox DATA RESET
          </button>
          <QInput
            type="checkbox"
            value={checkboxInput}
            onChange={setCheckboxInput}
            options={[
              { id: 'c01', value: 'checkbox1', name: 'Checkbox 1' },
              { id: 'c02', value: 'checkbox2', name: 'Checkbox 2' },
            ]}
          />
        </div>
        <div className="m-2">
          <br />
          <button
            className="btn-frame deepgray"
            onClick={() => {
              setSelectedValue([])
            }}
          >
            QSelect DATA RESET
          </button>
          <QSelect
            value={selectedValue}
            onChange={setSelectedValue}
            // placeholder="동물을 선택하세요"
            options={[
              { id: 's01', value: 'cat', name: '고양이' },
              { id: 's02', value: 'dog', name: '개' },
              { id: 's03', value: 'lion', name: '사자' },
              { id: 's04', value: 'tiger', name: '호랑이' },
            ]}
          />
          <QSelect
            value={selectedValue}
            onChange={setSelectedValue}
            placeholder="동물을 선택하세요"
            options={[
              { id: 's01', value: 'cat', name: '고양이' },
              { id: 's02', value: 'dog', name: '개' },
              { id: 's03', value: 'lion', name: '사자' },
              { id: 's04', value: 'tiger', name: '호랑이' },
            ]}
            disabled="true"
          />
          <QSelect
            value={selectedValue}
            onChange={setSelectedValue}
            placeholder="동물을 선택하세요"
            options={[
              { id: 's01', value: 'cat', name: '고양이' },
              { id: 's02', value: 'dog', name: '개' },
              { id: 's03', value: 'lion', name: '사자' },
              { id: 's04', value: 'tiger', name: '호랑이' },
            ]}
            dark="true"
          />
        </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 dangerouslySetInnerHTML={{ __html: getMessage('welcome', ['<span style="color: red">test</span>']) }}></div>
        <div>
          <h1>React ColorPicker</h1>
          <ColorPicker color={color} setColor={setColor} />
          <div className="p-4">{color}</div>
        </div>
        <div>
          <h1 className="text-2xl">캐드 파일 이미지 사용</h1>
          <input type="file" name="file" ref={fileRef} />
          <div>
            <Button onClick={handleConvert}>Convert</Button>
          </div>
        </div>
        <div>
          <h1 className="text-2xl">구글 맵 이미지 사용</h1>
          <input type="text" ref={queryRef} className="w-80 border-medium my-2" />
          <div>
            <Button onClick={handleDownImage}>Google map Download to Image</Button>
          </div>
          {useGoogleMapFile && (
            <>
              <div className="my-2">
                <p className="text-lg">Zoom Controller : {zoom}</p>
                <Button startContent={<FaAnglesUp />} className="mx-2" onClick={() => handleZoom('up')}></Button>
                <Button startContent={<FaAnglesDown />} className="mx-2" onClick={() => handleZoom('down')}></Button>
              </div>
              <div className="my-2">
                <Image src={`/mapImages/${googleMapFileName}`} width={640} height={640} />
              </div>
            </>
          )}
        </div>
        <div className="my-2">
          <Button onClick={() => swalFire({ text: 'alert 테스트입니다.' })}>Sweetalert - alert</Button>
        </div>
        <div className="my-2">
          <Button onClick={() => swalFire({ text: 'alert 아이콘 테스트입니다.', icon: 'error' })}>Sweetalert - alert - error</Button>
        </div>
        <div className="my-2">
          <Button
            onClick={() =>
              swalFire({
                html: `confirm 테스트입니다.<br />당신은 바보입니까?`,
                type: 'confirm',
                confirmFn: () => {
                  alert('test')
                },
              })
            }
          >
            Sweetalert - confirm
          </Button>
        </div>
        <div className="my-2">
          <QPagination {...paginationProps} />
        </div>
        <div className="my-2">
          <Button
            onClick={() => {
              promiseGet({ url: 'http://localhost:8080/api/user' }).then((res) => setUsers(res.data))
            }}
          >
            axios get test
          </Button>
        </div>
        <div className="my-2">
          <Button
            onClick={() => {
              const result = promisePost({
                url: 'http://localhost:8080/api/user',
                data: {
                  firstName: 'Yoo',
                  lastName: 'Sangwook',
                  email: 'yoo1757@naver.com',
                  age: 46,
                },
              }).then((res) => console.log('res', res))
            }}
          >
            axios post test
          </Button>
        </div>
      </div>
    </>
  )
}