import React from "react";
import styles from "./Landing.module.css";
import { customerState } from "../store";
import Calendar from "./Calendar";
import { fetchCustomerData } from "../api";
import { useAtom } from "jotai";

export default function Landing() {
    const [customerData, setCustomerData] = useAtom(customerState);

    const submitIdentifier = (formData: FormData) => {
        const identifier = formData.get("identifier") as string;
        if (identifier) {
            fetchCustomerData(identifier)
                .then((data) => {
                    setCustomerData(data);
                }).catch((error) => {
                    console.error("Error fetching customer data:", error);
                });
        }
    }

    return (
        customerData.identifier === 'Tuntematon' ? (
            <form action={submitIdentifier} className={styles.identifierForm}>
                <label htmlFor="identifier" className={styles.identifierLabel}>Tunnus</label>
                <input name="identifier" type="password" className={styles.identifierInput} />
                <button type="submit" className={styles.submitButton} >Login</button>
            </form>) : (
            <Calendar />
        )
    );
}