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' || customerData.identifier === 'Ei löydy' ? (
            <>
                <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} >Kirjaudu</button>
                </form>

                {customerData.identifier === 'Ei löydy' && (
                    <div className={styles.notFoundMessage}>
                        Tunnusta ei löydy. Ole hyvä ja tarkista tunnus.
                    </div>
                )}

                <div className={styles.infoText}>
                    Kirjaudu sisään tilauksesi tunnuksella.
                    <br />
                    Ongelmatilanteissa voit ottaa yhteyttä asiakaspalvelumme
                    <br />
                    <a href="mailto:livonsaaren.osuuspuutarha@gmail.com">
                        livonsaaren.osuuspuutarha@gmail.com
                    </a>
                </div>
            </>
        ) : (
            <Calendar />
        )
    );
}