// @flow
import React, { useState, type Node } from 'react';
import { TextInput } from './text-input';
import { Datepicker } from '../../one-off/datepicker';
import { Select } from './select';
import { Option } from './select/option';
import { SearchInput } from './search-input';
import { FieldSet } from './field-set';
import { Box } from '../../primitives';
import { Text } from '../typography/text';
import docs from './form-recipes.mdx';

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

const allSearchResults = [
  { id: 'ca', text: 'Canada' },
  { id: 'fr', text: 'France' },
  { id: 'de', text: 'Germany' },
  { id: 'it', text: 'Italy' },
  { id: 'jp', text: 'Japan' },
  { id: 'cn', text: "People's Republic of China" },
  { id: 'ir', text: 'Republic of Ireland' },
  { id: 'uae', text: 'United Arab Emirates' },
  { id: 'uk', text: 'United Kingdom' },
  { id: 'us', text: 'United States of America' },
];
const getSearchResults = (searchText?: string) => {
  if (searchText == null) return [];
  const regex = new RegExp(searchText, 'i');
  return allSearchResults.filter((result) => result.text.match(regex));
};

type FormSectionProps = {|
  label: string,
  children: Node,
|};
const FormSection = ({ label, children }: FormSectionProps) => (
  <FieldSet label={label} spacing="mb1">
    {children}
  </FieldSet>
);

type FormRowProps = {| children: Node |};
const FormRow = ({ children }: FormRowProps) => (
  <Box
    stacked={{ sm: 'column', md: 'row' }}
    align={{ sm: 'stretch', md: 'center' }}
    spacing="mb1"
  >
    {children}
  </Box>
);

export const ComplexResponsiveForm = () => {
  const [givenName, setGivenName] = useState();
  const [middleNames, setMiddleNames] = useState();
  const [familyName, setFamilyName] = useState();
  const [streetNameAndNumber, setStreetNameAndNumber] = useState();
  const [unit, setUnit] = useState();
  const [city, setCity] = useState();
  const [postalCode, setPostalCode] = useState();
  const [province, setProvince] = useState();
  const [countrySearchInput, setCountrySearchInput] = useState();
  const [country, setCountry] = useState();
  const [someMoney, setSomeMoney] = useState();
  const [birthdate, setBirthdate] = useState();

  return (
    <>
      <FormSection label="Full Legal Name">
        <FormRow>
          <TextInput
            grow={{ md: 1 }}
            spacing={{ sm: 'mb1', md: 'mr1' }}
            name="givenName"
            placeholder="Given name"
            label="Given name"
            value={givenName}
            onChange={setGivenName}
          />
          <TextInput
            grow={{ md: 8 }}
            spacing={{ sm: 'mb1', md: 'mr1' }}
            name="middleNames"
            placeholder="Middle names"
            label="Middle names"
            value={middleNames}
            onChange={setMiddleNames}
          />
          <TextInput
            grow={{ md: 1 }}
            name="familyName"
            placeholder="Family name"
            label="Family name"
            value={familyName}
            onChange={setFamilyName}
          />
        </FormRow>
      </FormSection>

      <FormSection label="Residential Address">
        <FormRow>
          <TextInput
            grow={{ md: 9 }}
            spacing={{ sm: 'mb1', md: 'mr1' }}
            name="streetNameAndNumber"
            placeholder="Street name and number"
            label="Street name and number"
            value={streetNameAndNumber}
            onChange={setStreetNameAndNumber}
          />
          <TextInput
            grow={{ md: 1 }}
            name="unit"
            placeholder="Unit"
            label="Unit"
            value={unit}
            onChange={setUnit}
          />
        </FormRow>
        <FormRow>
          <TextInput
            grow={{ md: 9 }}
            spacing={{ sm: 'mb1', md: 'mr1' }}
            name="city"
            placeholder="City"
            label="City"
            value={city}
            onChange={setCity}
          />
          <TextInput
            grow={{ md: 1 }}
            spacing={{ sm: 'mb1' }}
            name="postalCode"
            placeholder="Postal code"
            label="Postal code"
            value={postalCode}
            onChange={setPostalCode}
          />
        </FormRow>
        <FormRow>
          <Select
            grow={{ md: 1 }}
            basis={{ md: 0 }}
            spacing={{ sm: 'mb1', md: 'mr1' }}
            placeholder="Province"
            label="Province"
            value={province}
            onChange={setProvince}
          >
            <Option value="on">Ontario</Option>
            <Option value="nl">Newfoundland and Labrador</Option>
          </Select>
          <SearchInput
            grow={{ md: 1 }}
            basis={{ md: 0 }}
            placeholder="Country"
            label="Country"
            value={country}
            onChange={setCountrySearchInput}
            onSearchResultClicked={(id, value) => {
              setCountry(value);
              setCountrySearchInput();
            }}
            searchResults={getSearchResults(countrySearchInput)}
          />
        </FormRow>
      </FormSection>

      <FormSection label="Other Stuff">
        <FormRow>
          <TextInput
            grow={{ md: 1 }}
            shrink={{ md: 0 }}
            spacing={{ sm: 'mb1', md: 'mr1' }}
            name="someMoney"
            placeholder="200"
            type="currency"
            label="Some money"
            value={someMoney}
            onChange={setSomeMoney}
          />
          <Datepicker
            grow={{ md: 1 }}
            shrink={{ md: 0 }}
            name="birthdate"
            label="Birthdate"
            value={birthdate}
            onChange={setBirthdate}
          />
        </FormRow>
      </FormSection>

      <Box spacing="p2">
        <Text bold>You entered:</Text>
        <Text>
          {givenName} {middleNames} {familyName}
        </Text>
        <Text>
          {streetNameAndNumber} {unit}
        </Text>
        <Text>
          {city} {province} {postalCode}
        </Text>
        <Text>{country}</Text>
        <Text>{someMoney}</Text>
        <Text>{birthdate ? birthdate.toString() : null}</Text>
      </Box>
    </>
  );
};
