'use client';

import LogoutButton from 'components/button/logout';
import ShippingForm from 'components/shipping/form';
import { Customer } from 'lib/woocomerce/models/customer';
import { Shipping } from 'lib/woocomerce/models/shipping';
import Link from 'next/link';
import { useEffect, useState } from 'react';

export default function ProfilePage() {
  const [customer, setCustomer] = useState<Customer | undefined>(undefined);
  const [shippingAddress, setShippingAddress] = useState<Shipping | undefined>(undefined);

  useEffect(() => {
    const fetchCustomer = async () => {
      const data = (await (
        await fetch('/api/customer', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json'
          }
        })
      ).json()) as Customer;
      setCustomer(data);
    };

    fetchCustomer();
  }, []);

  return (
    <section className="mx-auto mt-4 grid max-w-screen-2xl justify-center gap-4 px-4 pb-4">
      <h1 className="text-2xl font-bold">Profile</h1>
      <h2 className="text-2xl font-bold">Info</h2>
      {customer && (
        <div>
          <img src={customer.avatar_url} alt="avatar" className="h-11 w-11" />
          <div className="flex flex-col">
            <div className="mt-4">
              <label
                htmlFor="name"
                className="block text-sm font-medium text-gray-700 dark:text-gray-300"
              >
                Name
              </label>
              <input
                type="text"
                id="name"
                value={customer.first_name}
                className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
                disabled
              />
            </div>
            <div className="mt-4">
              <label
                htmlFor="lastname"
                className="block text-sm font-medium text-gray-700 dark:text-gray-300"
              >
                Cognome
              </label>
              <input
                type="text"
                id="lastname"
                value={customer.last_name}
                className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
                disabled
              />
            </div>
            <div className="mt-4">
              <label
                htmlFor="email"
                className="block text-sm font-medium text-gray-700 dark:text-gray-300"
              >
                Email
              </label>
              <input
                type="email"
                id="email"
                value={customer.email}
                className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
                disabled
              />

              <ShippingForm title="Shipping Info" handleChangeAction={setShippingAddress} />

              <div className="mt-4">
                <Link href={`/profile/orders`}>
                  <button type="button" className="w-full rounded-md bg-indigo-500 p-3 text-white">
                    Orders
                  </button>
                </Link>
              </div>
              <div className="mt-4">
                <LogoutButton />
              </div>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}
