import {useState} from 'react'
import router from 'next/router'

import {DateTime} from 'luxon'
import ActionBar from '~/components/admin/actionBar'
import {FormController, Dropdown, Input, IntegerInput, DecimalInput, DateInput, Button, Checkbox} from '~/components/form'

export default function NewCoupon() {
  const afterCreate = (coupon) => {
    router.push(`/admin/coupons`)
  }

  const [couponType, setType] = useState('flat')

  return (
    <>
      <ActionBar title="Create New Coupon"/>
      <FormController url="/api/coupons" afterSubmit={afterCreate}>
        <Input label="Code" name="code"/>
        <p style={{marginTop: '-14px', opacity: .6}}>(Leave blank for random code)</p>
        <DateInput label="Valid Through" name="valid_until" validate={date => !!date} minDate={new Date()} transform={date => DateTime.fromISO(date).plus({hours: 24}).toISO()}/>
        <Checkbox label="Free Shipping" name="free_shipping" hint="Yes" />
        <IntegerInput label="Number of Allowed Uses" initialValue={1} name="number_allowed_uses" />
        <Dropdown isValid={true} label="Discount Type" initialValue="flat_discount" onChange={ev => setType(ev.target.value)}>
          <option value="flat">Dollars Off Total</option>
          <option value="percent">Percent of Total</option>
          <option value="per_sock">Dollars Off Per Sock</option>
          <option value="num_free">Free Socks</option>
        </Dropdown>
        <DecimalInput hidden={couponType !== 'flat'} label="Total Discount" name="flat_discount_cents" prefix="$" numDecimals={2} transform={float => Math.floor(float * 100)} />
        <IntegerInput hidden={couponType !== 'percent'} label="Percentage" maximum={100} name="percent_discount" initialValue={10} />
        <DecimalInput hidden={couponType !== 'per_sock'} label="Discount Per Sock" name="per_sock_discount" prefix="$" numDecimals={2} transform={float => Math.floor(float * 100)} />
        <IntegerInput hidden={couponType !== 'num_free'} label="Number of Free Socks" name="number_of_socks_free" initialValue={1} />
        <Button type="submit">Create</Button>
      </FormController>
    </>
  )
}