import router from 'next/router'

import ActionBar from '~/components/admin/actionBar'
import {FormController, Input, Button} from '~/components/form'

ShippingFrom.getInitialProps = async ({ctx: {axios}}) => {
  const {data: {shipping_from: address}} = await axios.get(`/api/config`)
  return {address}
}

export default function ShippingFrom({address}) {
  const afterSave = () => {
    router.push(`/admin/config`)
  }

  return (
    <>
      <ActionBar title="Update Shipping Source Address"/>
      <FormController url="/api/config/address" afterSubmit={afterSave}>
      <Input initialValue={address?.name} name="name" validate={value=>value.length > 0}/>
        <Input initialValue={address?.street1} label="Street (line 1)" name="street1" validate={value=>value.length > 0}/>
        <Input initialValue={address?.street2} label="Street (line 2)" name="street2"/>
        <Input initialValue={address?.city} label="City" name="city" validate={value=>value.length > 0}/>
        <Input initialValue={address?.state} label="State / Province" name="state" validate={value=>value.length > 0}/>
        <Input initialValue={address?.zip} label="Postal Code" name="zip" validate={value=>value.length > 0}/>
        <Input initialValue={address?.country} label="Country" name="country" validate={value=>value.length > 0}/>
        <Input initialValue={address?.phone} label="Phone" name="phone" validate={value=>value.length > 0}/>
        <Button type="submit">Save Address</Button>
      </FormController>
    </>
  )
}