// @flow
import React from 'react';
import { action } from '@storybook/addon-actions';
import { TextInput } from './text-input';
import { Select } from './select';
import { Option } from './select/option';
import { FieldLabel } from '../typography';
import { FieldSet } from './field-set';
import { Box } from '../../primitives';
import docs from './form-examples.mdx';

export default {
  title: 'Examples/Forms',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

export const ComplexResponsiveForm = () => (
  <>
    <Box stacked={{ md: 'row' }}>
      <FieldLabel aria-hidden basis={200} shrink={0}>
        Full Legal Name
      </FieldLabel>
      <FieldSet
        label="Full Legal Name"
        stacked={{ sm: 'column', md: 'row' }}
        align={{ sm: 'stretch', md: 'center' }}
        spacing="mb1"
        hideLabel
        grow={1}
      >
        <TextInput
          basis={{ md: 200 }}
          shrink={{ md: 0 }}
          spacing={{ sm: 'mb1', md: 'mr1' }}
          name="givenName"
          placeholder="Given name"
          label="Given name"
          hideLabel
          onChange={action('change')}
        />
        <TextInput
          grow={{ md: 1 }}
          shrink={{ md: 0 }}
          spacing={{ sm: 'mb1', md: 'mr1' }}
          name="middleNames"
          placeholder="Middle names"
          label="Middle names"
          hideLabel
          onChange={action('change')}
        />
        <TextInput
          grow={{ md: 1 }}
          shrink={{ md: 0 }}
          name="familyName"
          placeholder="Family name"
          label="Family name"
          hideLabel
          onChange={action('change')}
        />
      </FieldSet>
    </Box>
    <Box stacked={{ md: 'row' }}>
      <FieldLabel aria-hidden basis={200} shrink={0}>
        Residential Address
      </FieldLabel>
      <FieldSet label="Residential Address" hideLabel grow={1}>
        <Box
          stacked={{ sm: 'column', md: 'row' }}
          align={{ sm: 'stretch', md: 'center' }}
          spacing="mb1"
        >
          <TextInput
            grow={{ md: 1 }}
            shrink={{ md: 0 }}
            spacing={{ sm: 'mb1', md: 'mr1' }}
            name="streetNameAndNumber"
            placeholder="Street name and number"
            label="Street name and number"
            hideLabel
            onChange={action('change')}
          />
          <TextInput
            shrink={{ md: 0 }}
            basis={{ md: 100 }}
            name="unit"
            placeholder="Unit"
            label="Unit"
            hideLabel
            onChange={action('change')}
          />
        </Box>
        <Box
          stacked={{ sm: 'column', md: 'row' }}
          align={{ sm: 'stretch', md: 'center' }}
          spacing="mb1"
        >
          <TextInput
            grow={{ md: 1 }}
            spacing={{ sm: 'mb1', md: 'mr1' }}
            name="city"
            placeholder="City"
            label="City"
            hideLabel
            onChange={action('change')}
          />
          <Select
            grow={{ md: 1 }}
            spacing={{ sm: 'mb1', md: 'mr1' }}
            placeholder="Province"
            label="Province"
            hideLabel
            onChange={action('change')}
            value={undefined}
          >
            <Option value="on">Ontario</Option>
            <Option value="nl">Newfoundland and Labrador</Option>
          </Select>
          <TextInput
            grow={{ md: 1 }}
            spacing={{ sm: 'mb1', md: 'mr1' }}
            name="postalCode"
            placeholder="Postal code"
            label="Postal code"
            hideLabel
            onChange={action('change')}
          />
          <Select
            grow={{ md: 1 }}
            placeholder="Country"
            label="Country"
            hideLabel
            value={undefined}
            onChange={action('change')}
          >
            <Option value="ca">Canada</Option>
            <Option value="usa">United States</Option>
          </Select>
        </Box>
      </FieldSet>
    </Box>
  </>
);
