import React, { useState } from "react";
import { Button } from "@arcteryx/components-button";
import { useForm } from "react-hook-form";
import { AddressForm } from "./components/Address/AddressForm";
import BaseAddressInputs from "./components/Address/BaseAddressInputs";
import IsPoBox from "./components/Address/IsPoBox";
import PhoneNumber from "./components/Address/PhoneNumber";
import mockCountryList from "../mocks/countries.json";
import styled from "styled-components";
import { Body6, H5 } from "@arcteryx/components-typography";

const DivWrapper = styled.div`
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  justify-content: space-around;
  margin-top: 4em;
`;
const Wrapper = styled.div`
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  width: 500px;
`;
export const ShippingAddress = ({ countryList, watch, trigger, register, errors, setValue }) => {
  const currentCountry = watch("country");
  return (
    <AddressForm>
      <BaseAddressInputs
        watch={watch}
        register={register}
        errors={errors}
        setValue={setValue}
        trigger={trigger}
        countryList={countryList}
        googleAutocompleteApiKey={process.env.STORYBOOK_GOOGLE_API_KEY}
        hideName={true}
      />
      <IsPoBox errors={errors} register={register} currentCountry={currentCountry} />
      <PhoneNumber
        errors={errors}
        register={register}
        watch={watch}
        setValue={setValue}
        currentCountry={currentCountry}
      />
    </AddressForm>
  );
};

export const BillingAddress = ({ countryList, ...form }) => (
  <AddressForm>
    <BaseAddressInputs {...form} countryList={countryList} />
  </AddressForm>
);

export const AddressStory = () => {
  const [shippingIsValid, setShippingIsValid] = useState(false);
  const [shippingData, setShippingData] = useState();
  const [billingIsValid, setBillingIsValid] = useState(false);
  const [billingData, setBillingData] = useState();
  const {
    formState: { errors: shippingErrors },
    ...shippingForm
  } = useForm({
    defaultValues: {
      country: "CA",
    },
  });
  const {
    formState: { errors: billingErrors },
    ...billingForm
  } = useForm();

  return (
    <DivWrapper>
      <Wrapper>
        <H5>The Shipping Address Form</H5>
        <Body6>Is Valid: {shippingIsValid ? "True" : "False"}</Body6>
        <pre>data: {JSON.stringify(shippingData, null, "\t")}</pre>
        <Button
          onClick={async () => {
            setShippingIsValid(await shippingForm.trigger());
            setShippingData(shippingForm.getValues());
          }}
        >
          Validate and Collect Data
        </Button>
        <ShippingAddress {...shippingForm} errors={shippingErrors} countryList={mockCountryList} />
      </Wrapper>
      <Wrapper>
        <H5>The Billing Address Form</H5>
        <Body6>Is Valid: {billingIsValid ? "True" : "False"}</Body6>
        <pre>data: {JSON.stringify(billingData, null, "\t")}</pre>
        <Button
          onClick={async () => {
            setBillingIsValid(await billingForm.trigger());
            setBillingData(billingForm.getValues());
          }}
        >
          Validate and Collect Data
        </Button>
        <BillingAddress {...billingForm} errors={billingErrors} countryList={mockCountryList} />
      </Wrapper>
    </DivWrapper>
  );
};