// /* eslint-disable react-hooks/exhaustive-deps */
// /* eslint-disable @typescript-eslint/no-explicit-any */
// import { ChangeEvent, useEffect, useState } from 'react';
// import api from '../../utils/api';
// import Button from '../Button';
// import IProject from '../../types/IProject';
// import useModalStore from '../../stores/useModalStore';
// import { format } from 'date-fns';
// import Close2Icon from '../icons/Close2Icon';

// function CreateProjectModal() {
//   const [project, setProject] = useState<IProject>({
//     title: '',
//     company: '',
//     city: '',
//     image: '',
//     releaseDate: format(new Date(), 'yyyy-MM-dd'),
//     devices: [],
//   });

//   const [file, setFile] = useState<File>();
//   const [previewFile, setPreviewFile] = useState<string>();
//   const [setModal] = useModalStore((state) => [state.setModal]);

//   function handleChangeFile(e: ChangeEvent<HTMLInputElement>) {
//     if (!e.target.files) return;

//     const targetFile = e.target.files[0];

//     setFile(targetFile);
//     setPreviewFile(URL.createObjectURL(targetFile));
//   }

//   async function uploadFile() {
//     if (!file) return;

//     const formData = new FormData();
//     formData.append('file', file);

//     try {
//       const { file }: { file: string } = await api
//         .post('upload', { body: formData })
//         .json();

//       setProject((prev) => ({
//         ...prev,
//         image: file,
//       }));
//     } catch (error) {
//       if (error instanceof Error) {
//         alert(`Error: ${error.message}`);
//       }
//     }
//   }

//   async function createProject() {
//     try {
//       await api.post('projects', { json: { ...project } });

//       setModal(null);
//     } catch (error) {
//       if (error instanceof Error) {
//         alert(`Error: ${error.message}`);
//       }
//     }
//   }

//   async function handleSubmit(e: ChangeEvent<HTMLFormElement>) {
//     e.preventDefault();

//     await createProject();

//     window.location.reload();
//   }

//   useEffect(() => {
//     uploadFile();
//   }, [file]);

//   return (
//     <div className='flex flex-col gap-4 p-8 text-black bg-white shadow-lg rounded-xl'>
//       <div className='flex justify-between items-center border-b border-[#ccc] pb-4 gap-4'>
//         <p className='text-xl'>Создание проекта</p>
//         <button
//           onClick={() => setModal(null)}
//           className='p-2 transition-colors rounded-full hover:bg-white hover:bg-opacity-10'
//         >
//           <Close2Icon />
//         </button>
//       </div>
//       <form
//         onSubmit={handleSubmit}
//         className='grid grid-cols-2 gap-4 w-[512px]'
//       >
//         <div className='flex flex-col gap-1'>
//           <label className='text-sm'>Название</label>
//           <input
//             autoFocus
//             required
//             type='text'
//             placeholder='Название'
//             className='px-3 py-2 border rounded-lg outline-none border-neutral-500'
//             value={project.title}
//             onChange={(e) =>
//               setProject((prev) => ({ ...prev, title: e.target.value }))
//             }
//           />
//         </div>

//         <div className='flex flex-col gap-1'>
//           <label className='text-sm'>Компания</label>
//           <input
//             required
//             type='text'
//             placeholder='Компания'
//             className='px-3 py-2 border rounded-lg outline-none border-neutral-500'
//             value={project.company}
//             onChange={(e) =>
//               setProject((prev) => ({ ...prev, company: e.target.value }))
//             }
//           />
//         </div>

//         <div className='flex flex-col gap-1'>
//           <label className='text-sm'>Город</label>
//           <input
//             required
//             type='text'
//             placeholder='Город'
//             className='px-3 py-2 border rounded-lg outline-none border-neutral-500'
//             value={project.city}
//             onChange={(e) =>
//               setProject((prev) => ({ ...prev, city: e.target.value }))
//             }
//           />
//         </div>

//         <label className='relative flex flex-col gap-2 px-3 py-2 border border-dashed rounded-lg cursor-pointer border-neutral-500 hover:bg-opacity-10 hover:bg-black'>
//           <input
//             required
//             type='file'
//             accept='image/*'
//             className='absolute opacity-0'
//             onChange={handleChangeFile}
//           />
//           <p className='truncate'>
//             {file ? file.name : 'Выберите изображение'}
//           </p>

//           {previewFile && <img src={previewFile} alt='' />}
//         </label>

//         <div className='flex flex-col gap-1'>
//           <label className='text-sm'>Стадия</label>
//           <select
//             required
//             value={project.stage || ''}
//             className='px-3 py-2 border rounded-lg outline-none border-neutral-500'
//             onChange={(e) =>
//               setProject((prev) => ({ ...prev, stage: +e.target.value }))
//             }
//           >
//             <option value='' disabled>
//               Выберите стадию
//             </option>
//             <option value={1}>1</option>
//             <option value={2}>2</option>
//             <option value={3}>3</option>
//             <option value={4}>4</option>
//             <option value={5}>5</option>
//             <option value={6}>6</option>
//           </select>
//         </div>

//         <div className='flex flex-col gap-1'>
//           <label className='text-sm'>Дата релиза</label>
//           <input
//             type='date'
//             required
//             value={project.releaseDate}
//             onChange={(e) =>
//               setProject((prev) => ({
//                 ...prev,
//                 releaseDate: e.target.value,
//               }))
//             }
//             className='px-3 py-2 border rounded-lg outline-none border-neutral-500'
//           />
//         </div>

//         <div className='flex flex-col gap-1'>
//           <p className='text-sm'>Девайсы</p>
//           <div className=''>
//             <label className='flex items-center gap-2'>
//               <input
//                 type='checkbox'
//                 onChange={(e) => {
//                   if (e.target.checked) {
//                     setProject((prev) => ({
//                       ...prev,
//                       devices: [...prev.devices!, 'stream'],
//                     }));
//                   } else {
//                     setProject((prev) => ({
//                       ...prev,
//                       devices: prev.devices!.filter(
//                         (device) => device !== 'stream'
//                       ),
//                     }));
//                   }
//                 }}
//               />
//               <span>Stream</span>
//             </label>

//             <label className='flex items-center gap-2'>
//               <input
//                 type='checkbox'
//                 onChange={(e) => {
//                   if (e.target.checked) {
//                     setProject((prev) => ({
//                       ...prev,
//                       devices: [...prev.devices!, 'touch'],
//                     }));
//                   } else {
//                     setProject((prev) => ({
//                       ...prev,
//                       devices: prev.devices!.filter(
//                         (device) => device !== 'touch'
//                       ),
//                     }));
//                   }
//                 }}
//               />
//               <span>Touch</span>
//             </label>

//             <label className='flex items-center gap-2'>
//               <input
//                 type='checkbox'
//                 onChange={(e) => {
//                   if (e.target.checked) {
//                     setProject((prev) => ({
//                       ...prev,
//                       devices: [...prev.devices!, 'mobile'],
//                     }));
//                   } else {
//                     setProject((prev) => ({
//                       ...prev,
//                       devices: prev.devices!.filter(
//                         (device) => device !== 'mobile'
//                       ),
//                     }));
//                   }
//                 }}
//               />
//               <span>Mobile</span>
//             </label>

//             <label className='flex items-center gap-2'>
//               <input
//                 type='checkbox'
//                 onChange={(e) => {
//                   if (e.target.checked) {
//                     setProject((prev) => ({
//                       ...prev,
//                       devices: [...prev.devices!, 'vr'],
//                     }));
//                   } else {
//                     setProject((prev) => ({
//                       ...prev,
//                       devices: prev.devices!.filter(
//                         (device) => device !== 'vr'
//                       ),
//                     }));
//                   }
//                 }}
//               />
//               <span>VR</span>
//             </label>
//           </div>
//         </div>

//         <div className='flex justify-end col-span-full'>
//           <Button className='text-white outline-none'>Добавить проект</Button>
//         </div>
//       </form>
//     </div>
//   );
// }

// export default CreateProjectModal;
