import React, { useEffect, useState } from 'react';
import { Link } from '@inertiajs/react';
import styles from './Header.module.css';

interface HeaderData {
    status: string;
    data: {
        photo: string | null;
        photo_mobile: string | null;
        photo_menu: string | null;
        title: string | null;
    };
}

interface NavigationLink {
    id: number;
    sort_order: number;
    name: string;
    link: string;
    external: number;
    created_at: string;
    updated_at: string;
}

export default function Header({isSmall=false}) {
    const [innerWidth, setInnerWidth] = useState(0);
    const [links, setLinks] = React.useState<NavigationLink[]>([]);
    const [data, setData] = useState<HeaderData['data'] | null>(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        Promise.all([
            fetch('/api/homepage').then(res => res.json()),
            fetch('/api/navigation').then(res => res.json())
        ])
            .then(([headerResponse, navigationResponse]) => {
                setData(headerResponse.data);
                setLinks(navigationResponse.data);
                setLoading(false);
            })
            .catch(error => {
                console.error('Error fetching data:', error);
                setLoading(false);
            });


        setInnerWidth(prevState => prevState = window.innerWidth);

        function handleResize() {
            setInnerWidth(prevState => prevState = window.innerWidth);
        }
        
        window.addEventListener('resize', handleResize);

        return () => {
            window.removeEventListener('resize', handleResize);
        }
    }, []);

    if (loading) {
        return (
            <></>
        );
    }

    return (
        <header className={styles.header}>
          <nav>
            <ul>
                {links.map((link) => {
                    return link.external ? (
                        <li key={link.id}>
                        <a
                            href={link.link}
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            {link.name}
                        </a>
                        </li>
                    ) : (
                        <li key={link.id}>
                        <Link
                            href={link.link}
                        >
                            {link.name}
                        </Link>
                        </li>
                    );
                })}
            </ul>
          </nav>
          <div className="image-column">
          {isSmall ? (
            <>
                {data && data.photo && data.photo_menu ? (
                    <div className="image-container">
                        <img className={styles['logo-small']} fetchPriority="high" src={data.photo_menu} alt="Logo pizzeri GhostPizza" />
                    </div>
                ) : null}
            </>    
            ) : (
            (data && data.photo && data.photo_mobile) ? (
                <div className="image-container">
                {innerWidth > 1450 ? (
                    <div className={styles['img-container']}>
                    <img
                        style={{ objectFit: "contain" }}
                        className={styles.logo}
                        src={data.photo}
                        alt={data.title || 'Ghost Pizza'}
                        fetchPriority="high"
                    />
                    </div>
                ) : (
                    <div className={styles['img-container']}>
                    <img
                        style={{ objectFit: "contain" }}
                        className={styles.logo}
                        src={data.photo_mobile}
                        alt={data.title || 'Ghost Pizza'}
                        fetchPriority="high"
                    />
                    </div>
                )}
                </div>
            ) : null
            )}
          </div>
        </header>
    );
}