text: import React, { useState, useEffect } from "react";
  import {
    InputLabel,
    Select,
    MenuItem,
    Button,
    Grid,
    Typography,
  } from "@material-ui/core";
  import { useForm, FormProvider } from "react-hook-form";
  import { commerce } from "../lib/commerce";
  import FormInput from "./FormInput";
  const AdressForm = ({ checkoutToken, next, handleBackToCartButton }) => {
    const [shippingCountries, setShippingCountries] = useState([]);
    const [shippingCountry, setShippingCountry] = useState("");
    const [shippingSubdivisions, setShippingSubdivisions] = useState([]);
    const [shippingSubdivision, setShippingSubdivision] = useState("");
    const [shippingOptions, setShippingOptions] = useState([]);
    const [shippingOption, setShippingOption] = useState("");
    const methods = useForm();
  
    const countries = Object.entries(shippingCountries).map(([code, name]) => ({
      id: code,
      label: name,
    }));
    const subdivisions = Object.entries(shippingSubdivisions).map(
      ([code, name]) => ({
        id: code,
        label: name,
      })
    );
    const options = shippingOptions.map((shippingOption) => ({
      id: shippingOption.id,
      label: `${shippingOption.description}-(${shippingOption.price.formatted_with_symbol})`,
    }));
  
    const fetchShippingCountries = async (checkoutTokenId) => {
      const { countries } = await commerce.services.localeListShippingCountries(
        checkoutTokenId
      );
      console.log(countries);
      setShippingCountries(countries);
      setShippingCountry(Object.keys(countries)[0]);
    };
  
    const fetchSubdivisions = async (countryCode) => {
      const { subdivisions } = await commerce.services.localeListSubdivisions(
        countryCode
      );
      setShippingSubdivisions(subdivisions);
      setShippingSubdivision(Object.keys(subdivisions)[0]);
    };
  
    const fetchShippingOptions = async (
      checkoutTokenId,
      country,
      region = null
    ) => {
      const options = await commerce.checkout.getShippingOptions(
        checkoutTokenId,
        { country, region }
      );
  
      setShippingOptions(options);
      setShippingOption(options[0].id);
    };
    useEffect(() => {
      fetchShippingCountries(checkoutToken.id);
    }, []);
    //change subdivisions when shipping country has changed
  
    useEffect(() => {
      if (shippingCountry) fetchSubdivisions(shippingCountry);
    }, [shippingCountry]);
  
    //change shipping options when subdivison change
    useEffect(() => {
      if (shippingSubdivision)
        fetchShippingOptions(
          checkoutToken.id,
          shippingCountry,
          shippingSubdivision
        );
    }, [shippingSubdivision]);
  
    return (
      <>
        <Typography variant="h6" gutterBottom>
          Shipping Adress
        </Typography>
        <FormProvider {...methods}>
          <form
            onSubmit={methods.handleSubmit((data) =>
              next({
                ...data,
                shippingCountry,
                shippingSubdivision,
                shippingOption,
              })
            )}
          >
            <Grid container spacing={3}>
              <FormInput name="firstName" label="First name" />
              <FormInput name="lastName" label="Last name" />
              <FormInput name="address1" label="Address" />
              <FormInput name="email" label="Email" />
              <FormInput name="city" label="City" />
              <FormInput name="zip" label="ZIP/Postal Code" />
              <Grid item xs={12} sm={6}>
                <InputLabel>Shiping Country</InputLabel>
                <Select
                  value={shippingCountry}
                  fullWidth
                  onChange={(e) => setShippingCountry(e.target.value)}
                >
                  {countries.map((country) => {
                    return (
                      <MenuItem key={country.id} value={country.id}>
                        {country.label}
                      </MenuItem>
                    );
                  })}
                </Select>
              </Grid>
              <Grid item xs={12} sm={6}>
                <InputLabel>Shiping SubDivision</InputLabel>
                <Select
                  value={shippingSubdivision}
                  fullWidth
                  onChange={(e) => setShippingSubdivision(e.target.value)}
                >
                  {subdivisions.map((subdivision) => {
                    return (
                      <MenuItem key={subdivision.id} value={subdivision.id}>
                        {subdivision.label}
                      </MenuItem>
                    );
                  })}
                </Select>
              </Grid>
              <Grid item xs={12} sm={6}>
                <InputLabel>Shiping options</InputLabel>
                <Select
                  value={shippingOption}
                  fullWidth
                  onChange={(e) => setShippingOption(e.target.value)}
                >
                  {options.map((option) => {
                    return (
                      <MenuItem key={option.id} value={option.id}>
                        {option.label}
                      </MenuItem>
                    );
                  })}
                </Select>
              </Grid>
            </Grid>
            <br />
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
              }}
            >
              <Button variant="outlined" onClick={handleBackToCartButton}>
                Back to Cart
              </Button>
              <Button type="submit" color="primary" variant="contained">
                Next
              </Button>
            </div>
          </form>
        </FormProvider>
      </>
    );
  };
  
  export default AdressForm;
  