import { type FC, useEffect, useState } from 'react'
import Konva from 'konva'
import { clx } from '@/helpers/utils'
import EditorSidebar from './components/EditorSidebar'
import EditorCanvas from './components/EditorCanvas'
import LayersPanel from './components/LayersPanel'
import { useGetCatalogById, useUpdateCatalog } from '../home/hooks/useHomeData'
import { useParams } from 'react-router-dom'
import { useEditorStore } from './store/editorStore'

const Editor: FC = () => {

    const { id } = useParams()

    // Konva 10 با legacyTextRendering=false متن را با baseline جدید می‌کشد ولی getWidth/getHeight
    // و کادر ترنسفورمر هنوز بر اساس جعبهٔ قدیمی‌اند؛ نتیجه: متن از کادر آبی بیرون می‌زند.
    useEffect(() => {
        const prev = Konva.legacyTextRendering
        Konva.legacyTextRendering = true
        return () => {
            Konva.legacyTextRendering = prev
        }
    }, [])
    const [isLayersPanelOpen, setIsLayersPanelOpen] = useState(false)
    const { loadPages, pages } = useEditorStore()
    const { data } = useGetCatalogById(id!)
    const { scheduleUpdate, isSaving } = useUpdateCatalog()

    useEffect(() => {
        if (data?.data && data?.data?.content) {
            const json = JSON.parse(data?.data?.content)
            console.log(json);

            if (json) {
                loadPages(json)
            }
        }

        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [data?.data])

    useEffect(() => {
        if (!id) return
        if (!pages || pages.length === 0) return

        scheduleUpdate({
            id,
            content: JSON.stringify(pages),
        })
        // عمداً scheduleUpdate را در وابستگی‌ها نیاوردیم تا از لوپ ذخیره‌سازی جلوگیری شود
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [id, pages])


    return (
        <div className={clx(
            "flex h-full w-full",
            isLayersPanelOpen ? "xl:pl-[296px]" : "xl:pl-[80px]"
        )}>
            {isSaving ? (
                <div className="fixed bottom-10 left-10 z-50 rounded-full  shadow-sm">
                    <div className="flex items-center gap-2 text-sm text-gray-700">
                        <span className="h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-black" />
                        {/* <span>در حال ذخیره ...</span> */}
                    </div>
                </div>
            ) : null}
            <LayersPanel isOpen={isLayersPanelOpen} setIsOpen={setIsLayersPanelOpen} />
            <EditorCanvas catalogSize={data?.data?.size} />
            <EditorSidebar catalogSize={data?.data?.size} />
        </div>
    )
}

export default Editor