import type { NextPage } from "next";
import {
  getShippingMethods,
  getShippingZones,
} from "../../../services/woocommerceApi/ShippingMethods";
import { LightBackground } from "../../../styles/BackgroundStyle";
import LayoutAdmin from "../../../Layout/LayoutAdmin";
import { Button } from "../../../styles/ProductDetail";
import useCart from "../../../hooks/useCart";
import Image from "next/image";
import CouponsCode from "../../../components/CouponsCode";
import useUser from "../../../hooks/useUser";
import { createOrder } from "../../../services/woocommerceApi/Orders";
import LoginForm from "../../../components/Login";
import { StyledCheckout } from "../../../styles/CheckoutStyle";
import Input from "../../../components/Input";
import { ChangeEvent, useCallback, useState } from "react";

interface userShippingInfos {
  address_1: string;
  address_2: string;
  city: string;
  company: string;
  country: string;
  first_name: string;
  last_name: string;
  phone: string;
  postcode: string;
  state: string;
}

interface userBillingInfo {
  address_1: string;
  address_2: string;
  city: string;
  company: string;
  country: string;
  email: string;
  first_name: string;
  last_name: string;
  phone: string;
  postcode: string;
  state: string;
}

const CheckoutMagasin: NextPage = () => {
  // getShippingMethods();
  // getShippingZones();

  const { login, logout, user } = useUser();
  console.log("userdata", user);
  const { cart, removeCartItem } = useCart();

  const [userBilling, setUserBilling] = useState<userBillingInfo>(
    {} as userBillingInfo
  );
  const [userShipping, setUserShipping] = useState<userShippingInfos>(
    {} as userShippingInfos
  );
  const [otherShippingAdress, setOtherShippingAdress] = useState(false);

  const authorizedCounty = [
    "Suisse",
    "France",
    "Allemagne",
    "Italie",
    "Belgique",
    "Espagne",
    "Autriche",
    "Hollande",
  ];
  const order = {
    payment_method: "bacs",
    payment_method_title: "Direct Bank Transfer",
    set_paid: true,
    billing: userBilling,
    shipping: userShipping,
    line_items: [
      {
        product_id: 8140,
        quantity: 2,
      },
 
    ],
    shipping_lines: [
      {
        method_id: "flat_rate",
        method_title: "Flat Rate",
        total: "10.00",
      },
    ],
  };

  //enregistrer email dans billing
  // enregistrer billing data
  // enregistrer shipping data
  //si case otherShipping true
    //faire apparaitre le formulaire
    //vider le formulaire
    //enregistrer new values

  //BILLING DATA HANDLE CHANGE//

  // handleChange for Billing Inputs
  const handleChange = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      setUserBilling({
        ...userBilling,
        [event.target.name]: event.target.value,
      });
    },
    [userBilling]
  );
  
  //handle change for billing country selector
  const handleCountryChange = useCallback(
    (event: ChangeEvent<HTMLSelectElement>) => {
      setUserBilling({
        ...userBilling,
        [event.target.name]: event.target.value,
      });
    },
    [userBilling]
    );
    
    //SHIPPING DATA HANDLE CHANGE//
   
    // handleChange for different shipping address
    const handleChangeShipping = useCallback(
      (event: ChangeEvent<HTMLInputElement>) => {
        setOtherShippingAdress(!otherShippingAdress);
        setUserShipping({}as userShippingInfos)
      },
      [otherShippingAdress]
      );
      
      // handleChange for Billing Inputs
      const handleShippingChange = useCallback(
        (event: ChangeEvent<HTMLInputElement>) => {
          setUserShipping({
            ...userShipping,
            [event.target.name]: event.target.value,
          });
        },
        [userShipping]
      );

  //handle change for shipping country selector
  const handleShippingCountryChange = useCallback(
    (event: ChangeEvent<HTMLSelectElement>) => {
      setUserShipping({
        ...userShipping,
        [event.target.name]: event.target.value,
      });
      
    },
    [userShipping]
  );


      const sendOrder = () => {
    console.log("test",order);
    // createOrder(order);
  };

  console.log("userbilling-->", userBilling);
  console.log("user different shipping-->", otherShippingAdress);
  console.log("usershipping-->", userShipping);

  return (
    <LightBackground>
      <LayoutAdmin>
        <StyledCheckout>
          <div className="left">
            <div className="stepsValidations">
              <div className="step1">
                <div className="stepHeader">
                  <h3>Vos coordonnées</h3>
                </div>
                {!user.token && (
                  <>
                    <div>
                      Vous avez un compte? <LoginForm />
                    </div>
                    <div>
                      <input type="checkbox" /> Créer un nouveau compte ?
                    </div>
                  </>
                )}
                <form>
                  <Input
                    name="billing_first_name"
                    placeholder="Prénom"
                    onChange={handleChange}
                    required
                  />
                  <Input
                    name="billing_last_name"
                    placeholder="Nom"
                    onChange={handleChange}
                    required
                  />
                  <Input
                    name="billing_email"
                    placeholder="E-mail"
                    type={"email"}
                    onChange={handleChange}
                    required
                  />
                  <Input
                    name="billing_phone"
                    placeholder="Téléphone"
                    onChange={handleChange}
                    required
                  />
                  <Input
                    name="billing_address_1"
                    placeholder="Adresse 1"
                    onChange={handleChange}
                    required
                  />
                  <Input
                    name="billing_address_2"
                    placeholder="Adresse 2"
                    onChange={handleChange}
                  />
                  <Input
                    name="billing_postcode"
                    placeholder="NPA"
                    onChange={handleChange}
                    required
                  />
                  <Input
                    name="billing_city"
                    placeholder="Ville"
                    onChange={handleChange}
                    required
                  />
                  <Input
                    name="billing_state"
                    placeholder="Canton"
                    onChange={handleChange}
                    required
                  />
                  <select
                    name="billing_coutry"
                    onChange={handleCountryChange}
                    defaultValue={"--- choisissez un pays ---"}
                  >
                    <option disabled>--- choisissez un pays ---</option>
                    {authorizedCounty.map((country) => {
                      return (
                        <option key={country} value={country}>
                          {country}
                        </option>
                      );
                    })}
                  </select>
                  <div className="shippingCheckbox">
                    <input type={"checkbox"} onChange={handleChangeShipping} />
                    <p>Addresse de livraison différente ?</p>
                  </div>
                  {otherShippingAdress && (
                    <>
                      <Input
                        name="shipping_first_name"
                        placeholder="Prénom"
                        onChange={handleShippingChange}
                        required
                      />
                      <Input
                        name="shipping_last_name"
                        placeholder="Nom"
                        onChange={handleShippingChange}
                        required
                      />
                      <Input
                        name="shipping_phone"
                        placeholder="Téléphone"
                        onChange={handleShippingChange}
                        required
                      />
                      <Input
                        name="shipping_address_1"
                        placeholder="Adresse 1"
                        onChange={handleShippingChange}
                        required
                      />
                      <Input
                        name="shipping_address_2"
                        placeholder="Adresse 2"
                        onChange={handleShippingChange}
                      />
                      <Input
                        name="shipping_postcode"
                        placeholder="NPA"
                        onChange={handleShippingChange}
                        required
                      />
                      <Input
                        name="shipping_city"
                        placeholder="Ville"
                        onChange={handleShippingChange}
                        required
                      />
                      <Input
                        name="shipping_state"
                        placeholder="Canton"
                        onChange={handleShippingChange}
                        required
                      />
                      <select
                        name="shipping_coutry"
                        onChange={handleShippingCountryChange }
                        defaultValue={"--- choisissez un pays ---"}
                      >
                        <option disabled>--- choisissez un pays ---</option>
                        {authorizedCounty.map((country) => {
                          return (
                            <option key={country} value={country}>
                              {country}
                            </option>
                          );
                        })}
                      </select>
                    </>
                  )}
                </form>
              </div>
              <div className="step2"></div>
              <div className="step3"></div>
              <div className="step4"></div>
            </div>
          </div>
          <div className="right">
            <div className="cartPreview">
              <div className="cartContainer">
                <ul>
                  {cart.totalProductsCount > 0 ? (
                    cart.products.map((product) => {
                      return (
                        <li key={product.id}>
                          <button
                            className="closeButton"
                            onClick={() => removeCartItem(product.id)}
                          ></button>
                          <div className="cartProductInfos">
                            <h5>{product.name}</h5>
                            <p>
                              {product.qty}x CHF {product.price}
                            </p>
                          </div>
                          <div className="cartProductThmbnail">
                            <Image
                              src={product.images[0].src}
                              alt={product.name}
                              height={50}
                              width={50}
                            />
                          </div>
                        </li>
                      );
                    })
                  ) : (
                    <li>
                      <p>aucun produit</p>
                    </li>
                  )}
                </ul>
                <h5 className="sousTotalTxt">
                  Sous total:{" "}
                  <span>CHF {cart.totalProductsPrice?.toFixed(2)}</span>
                </h5>
              </div>
            </div>
            <CouponsCode />
            <p>ajouter code promo</p>
            <p>ajouter expedition (seulement point de vente)</p>
            <p>ajouter tva</p>
            <p>ajouter prix total</p>
            <Button onClick={sendOrder}>valider la commande</Button>
          </div>
        </StyledCheckout>
      </LayoutAdmin>
    </LightBackground>
  );
};

export default CheckoutMagasin;