import { Head, useForm } from '@inertiajs/react';
import AppLayout from '@/layouts/app-layout';
import type { BreadcrumbItem } from '@/types';
import Heading from '@/components/other/heading';
import SiteInfoLayout from '@/layouts/site-info/layout';
import { Save } from 'lucide-react';
import { useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Spinner } from '@/components/ui/spinner';
import SocialLinkInputField from '@/components/core/SocialLinkInputField';
import { SocialLinkProp } from '@/types/social-link';
import { toast } from 'sonner';
import { isEqual } from 'lodash';

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Social Media Links',
        href: '',
    },
];


const defaultData: SocialLinkProp[] = [
    { id: 1, icon: "Facebook", label: "Facebook", link: "https://facebook.com/yourpage", color: "text-blue-600" },
    { id: 2, icon: "Instagram", label: "Instagram", link: "https://instagram.com/yourprofile", color: "text-pink-500" },
    { id: 3, icon: "Twitter", label: "Twitter / X", link: "https://twitter.com/yourhandle", color: "text-sky-500" },
    { id: 4, icon: "Youtube", label: "YouTube", link: "https://youtube.com/@yourchannel", color: "text-red-600" },
    { id: 5, icon: "Linkedin", label: "LinkedIn", link: "https://linkedin.com/company/yourcompany", color: "text-blue-700" },
    { id: 6, icon: "Globe", label: "Website", link: "", color: "text-emerald-600" },
];


export default function SocialMediaLinks({ social_links }: { social_links: SocialLinkProp[] }) {

    const { data, setData, put, processing, errors } = useForm<SocialLinkProp[]>([])

    const isUnchanged = isEqual(data, social_links);

    const handleSave = () => {
        put('/dashboard/site-info/social-links', {
            onSuccess: () => { toast.success('Successfuly Updated..!') },
            onError: (error) => { toast.error(error.message || 'Something went worgn. Please try again!'); }
        });
    };

    const onChangeHandler = (updatedItem: SocialLinkProp) => {
        const updated = data.map(item =>
            item.id === updatedItem.id ? updatedItem : item
        );
        setData(updated);
    }

    console.log(social_links);


    useEffect(() => {
        if (social_links && social_links.length > 0) {
            setData(social_links);
        } else {
            setData(defaultData);
        }
    }, [social_links]);

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Social Media Links" />

            <SiteInfoLayout>
                <div className="space-y-6">
                    <Heading
                        variant="small"
                        title="Social Media Links"
                        description="Update your Social Media Links of the Site"
                    />

                    <div className='space-y-4'>

                        {
                            data.map((item => <SocialLinkInputField key={item.id} item={item} onChange={onChangeHandler} disabled={processing} />))
                        }

                    </div>

                    {
                        // editEnabled &&
                        <div className="mt-6 text-right">
                            <Button size="sm" onClick={handleSave} disabled={processing || isUnchanged}>
                                {processing ? <><Spinner /> Saving...</> : <><Save className="w-6 h-6 mr-1" /> Save Changes</>}
                            </Button>
                        </div>
                    }

                </div>
            </SiteInfoLayout>
        </AppLayout>
    );
}
