import React, { useEffect, useState } from 'react'


import { FaSignature } from 'react-icons/fa'
import { IoIosDocument } from 'react-icons/io';
import { LuTableOfContents } from 'react-icons/lu';
import { MdKeyboardArrowDown } from 'react-icons/md'
import { RiResetLeftLine } from 'react-icons/ri';
import { FaCheck } from "react-icons/fa6";


interface FIT {
    label: string,
    value: number | null
}

const fitObj = [
    {
        label: "Fit",
        value: "FIT"
    },
    {
        label: "50%",
        value: "50"
    },
    {
        label: "100%",
        value: "100"
    },
    {
        label: "150%",
        value: "150"
    },
]

const DocView = () => {
    const [nav2RecToggle, setNav2RecToggle] = useState<boolean>(false);
    const [nav2DocToggle, setNav2DocToggle] = useState<boolean>(false);
    const [isFields, setIsFields] = useState<boolean>(false);

    const [isFitDd, setIsFitDd] = useState<boolean>(false)
    const [selFitIndx, setSelFitIndx] = useState<number>(0);

    function zoom(percentage: number, contentClass: string) {

        const content = document.querySelector(`.${contentClass}`);
        const scale = percentage // 100;
        if(content) {
            content.style.transform = `scale(${scale})`;
        }
    }

    useEffect(() => {
        let indx = fitObj[selFitIndx].value
        if (indx === "FIT") {
            indx = "100";
        } 
        zoom(Number(indx), 'zoom-con')
    }, [selFitIndx])

    return (
        <>

            {/* Nav Two - Oprions - START */}
            <div className='flex justify-between items-center px-4 py-1 bg-white'>

                {/* Left Side */}
                <div className='flex justify-start items-center gap-2'>

                    <div
                        onClick={() => setIsFields(true)}
                        className={`flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm ${isFields ? 'bg-slate-100' : ''}`}>
                        <LuTableOfContents />
                        <p className='tracking-wide'>Fields</p>
                    </div>

                    <div
                        onClick={() => setIsFields(false)}
                        className={`flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm ${!isFields ? 'bg-slate-100' : ''}`}>
                        <IoIosDocument />
                        <p className='tracking-wide'>Pages</p>
                    </div>


                    <div className='flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
                        <RiResetLeftLine />
                        <p className='tracking-wide'>Reset</p>
                    </div>

                    <div
                        tabIndex={1}
                        onBlur={() => setIsFitDd(false)}
                    >
                        <div
                            onClick={() => setIsFitDd(!isFitDd)}
                            className='flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
                            <p className='tracking-wide'>Fit</p>
                            <MdKeyboardArrowDown style={{transform: `${isFitDd ? "rotate(180deg)" : ""}`}} />
                        </div>

                        {isFitDd && <div className='absolute bg-white rounded-sm z-50'>
                            {fitObj.map((val, indx) => {
                                return (<div
                                    key={indx}
                                    onClick={() => setSelFitIndx(indx)}
                                    className='flex z-50 items-center justify-between gap-2 w-[70px] p-2 text-xs cursor-default hover:bg-slate-100'>
                                    <div

                                        className='flex items-center justify-between w-full'>
                                        <p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[12ch]'>{val.label}</p>
                                        {selFitIndx === indx && <FaCheck className='text-sm text-slate-400' />}
                                    </div>
                                </div>)
                            })
                            }
                        </div>}



                    </div>

                </div>

            </div>
            {/* Nav Two - ENDS */}



            <div className='grid grid-cols-12 gap-1 mt-1 h-[calc(100vh-38px)] overflow-hidden'>
                <div className='col-span-2 bg-white h-full p-4 overflow-y-auto'></div>
                <div className='zoom-con col-span-8 bg-slate-200 h-full p-4 overflow-y-auto'>
                            Test Zoom
                </div>
                <div className='col-span-2 bg-white h-full p-4 overflow-y-auto'></div>
            </div>
        </>
    )
}

export default DocView