/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'
import RoomCard from '@/components/RoomCard'
import { CallApi } from '@/helper/api/ApiConnector'
import Link from 'next/link'
import React, { useState } from 'react'

export default function Search() {
    const [details, setDetails] = useState<{
        id?: number;
        image: any,
        title: string,
        room: string,
        color: string
    }>()

    const handleSave = async () => {
        console.log(await CallApi(`/room`, 'POST', { id: 0, ...details,image: details?.image }))
    }

    return (
        <div className='w-screen h-screen bg-black'
        // style={{ 'background': 'conic-gradient(from 210deg, #c6bcb9 0.000deg, #c6bcb9 24.000deg, #b9b6b9 calc(24.000deg + 0.1deg), #b9b6b9 48.000deg, #aab0b8 calc(48.000deg + 0.1deg), #aab0b8 72.000deg, #9ba9b6 calc(72.000deg + 0.1deg), #9ba9b6 96.000deg, #8ca2b4 calc(96.000deg + 0.1deg), #8ca2b4 120.000deg, #7e99b0 calc(120.000deg + 0.1deg), #7e99b0 144.000deg, #7191ac calc(144.000deg + 0.1deg), #7191ac 168.000deg, #6688a7 calc(168.000deg + 0.1deg), #6688a7 192.000deg, #5d7fa2 calc(192.000deg + 0.1deg), #5d7fa2 216.000deg, #56769c calc(216.000deg + 0.1deg), #56769c 240.000deg, #526d95 calc(240.000deg + 0.1deg), #526d95 264.000deg, #50648e calc(264.000deg + 0.1deg), #50648e 288.000deg, #515b86 calc(288.000deg + 0.1deg), #515b86 312.000deg, #55547e calc(312.000deg + 0.1deg), #55547e 336.000deg, #5c4c75 calc(336.000deg + 0.1deg) 360.000deg)' }}

        >
            <div className='grow flex flex-col items-center align-middle justify-center h-full w-full'>

                <div
                    className='bg-white/10 w-full h-full lg:h-[90%] lg:w-[90%] m-2 backdrop-blur-lg flex flex-col border border-white/20  shadow-lg'
                >

                    <div className='bg-purple-950 text-white flex justify-evenly'>
                        <button className='p-2 grow hover:backdrop-blur-lg hover:bg-white/10'>Room Details</button>
                        <button className='p-2 grow hover:backdrop-blur-lg hover:bg-white/10'>Audiance</button>
                        <button className='p-2 grow hover:backdrop-blur-lg hover:bg-white/10'>Rules</button>
                        <button className='p-2 grow hover:backdrop-blur-lg hover:bg-white/10'>Guest List</button>
                    </div>
                    <div>
                        <input placeholder='Room Name'
                            onChange={e => setDetails((d: any) => {
                                return { ...d, title: e.target.value }
                            })}
                            className='text-white w-full border-0 focus:p-2 transition-all focus:border-0' />

                        <button onClick={handleSave} className='text-white'>Save</button>
                        <div>
                            <label>Image</label>
                            <input
                                onChange={e => {
                                    const file = e.target.files![0]
                                    if (file && file.type.startsWith('image/')) {
                                        const reader = new FileReader(); // Create a new FileReader instance

                                        // Set up the onload event for the reader
                                        reader.onload = function (e) {
                                            // e.target.result contains the image data as a Base64 encoded URL (data URL)
                                            console.log('Image Data URL:', e.target!.result);

                                            // You can now set the src of an image tag to this data URL to display it
                                            setDetails((d: any) => {
                                                return { ...d, image: e.target!.result }
                                            })
                                            // imagePreview.src = e.target.result;

                                            // To get pixel data (ImageData object), you would use a canvas element
                                            // (See "Getting Pixel Data" below)
                                        };

                                        // Read the image file as a Data URL
                                        reader.readAsDataURL(file);
                                    } else {
                                        // imagePreview.src = '#'; // Clear preview if not an image
                                        console.error('Please select a valid image file.');
                                    }
                                }}
                                className='text-white' type='file' name='image' />
                        </div>
                        <div>
                            <label>Colour</label>
                            <input
                                onChange={e => setDetails((d: any) => {
                                    return { ...d, color: e.target.value }
                                })}
                                type='color' name='color' />
                        </div>
                        {details && <RoomCard
                            color={details.color}
                            image={details!.image}
                            room='TEST'
                            title={details.title}
                        />}
                    </div>
                </div>
            </div>
        </div>
    )
}