// @flow
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import styled from 'styled-components';
import { action } from '@storybook/addon-actions';
import { TextInput } from './text-input.component';
import { Box } from '../../../primitives/box';
import { PaddingChecker } from '../../../mixins/spacing/story-support/padding-checker';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { StackeeChecker } from '../../../mixins/stackee/story-support/stackee-checker';
import docs from './text-input.mdx';
import { Button } from '../../actions/button';
import { SecondaryButton } from '../../actions/secondary-button';
import { TertiaryButton } from '../../actions/tertiary-button';

export default {
  component: TextInput,
  title: 'Components/Inputs/TextInput',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

export const Preview = () => (
  <TextInput
    label="Enter some text"
    placeholder="example text"
    onChange={action('onChange')}
  />
);

export const InvalidEmail = () => (
  <TextInput
    label="Enter some text"
    value="iAmNotAnEmailAddress"
    type="email"
    onChange={action('onChange')}
  />
);

export const Default = () => {
  const [demoValue, setDemoValue] = useState();
  return (
    <TextInput
      label="Enter some text"
      placeholder="example text"
      onChange={setDemoValue}
      value={demoValue}
      type="text"
    />
  );
};

export const ReadOnly = () => {
  const [demoValue, setDemoValue] = useState('ACDBEFGHIJKLMNOP');
  return (
    <TextInput
      label="Enter some text"
      placeholder="example text"
      onChange={setDemoValue}
      value={demoValue}
      type="grouped_code"
      readOnly
    />
  );
};

export const Error = () => {
  const [demoValue, setDemoValue] = useState('no, not this text');
  return (
    <TextInput
      label="Enter some text"
      onChange={setDemoValue}
      value={demoValue}
      type="text"
      error
    />
  );
};

export const ErrorFormattedMessage = () => {
  const [demoValue, setDemoValue] = useState('no, not this text');
  return (
    <TextInput
      label="Enter some text"
      onChange={setDemoValue}
      value={demoValue}
      type="text"
      error={<FormattedMessage id="foo" />}
    />
  );
};

export const PasswordMessaging = () => {
  const [demoValue, setDemoValue] = useState();
  const errorMessage =
    demoValue != null && demoValue !== '' && demoValue.length < 8
      ? 'Your password is too short'
      : undefined;
  const successMessage =
    demoValue != null && demoValue !== '' && demoValue.length >= 8
      ? 'Good job'
      : undefined;

  return (
    <TextInput
      label="Choose a password"
      onChange={setDemoValue}
      value={demoValue}
      type="password"
      hideValueButtonLabel="hide"
      revealValueButtonLabel="show"
      error={errorMessage}
      success={successMessage}
      description="Password must contain at least 8 characters"
    />
  );
};

export const Date = () => {
  const [rawValue, setRawValue] = useState();
  const [formattedValue, setFormattedValue] = useState();
  return (
    <TextInput
      label="Enter a date"
      onChange={(r, f) => {
        setRawValue(r);
        setFormattedValue(f);
      }}
      value={rawValue}
      type="date"
      placeholder="DD / MM / YYYY"
      description={
        rawValue
          ? `Raw value: ${rawValue}; formatted value: ${formattedValue ?? ''}`
          : undefined
      }
    />
  );
};

export const Number = () => {
  const [rawValue, setRawValue] = useState('123456789.987654321');
  const [formattedValue, setFormattedValue] = useState();
  return (
    <TextInput
      label="Pick a number"
      onChange={(r, f) => {
        setRawValue(r);
        setFormattedValue(f);
      }}
      value={rawValue}
      type="number"
      description={
        rawValue
          ? `Raw value: ${rawValue}; formatted value: ${formattedValue ?? ''}`
          : undefined
      }
    />
  );
};

export const Number3Decimals = () => {
  const [rawValue, setRawValue] = useState('123456789.987654321');
  const [formattedValue, setFormattedValue] = useState();
  return (
    <TextInput
      label="Pick a number"
      onChange={(r, f) => {
        setRawValue(r);
        setFormattedValue(f);
      }}
      value={rawValue}
      type="number"
      description={
        rawValue
          ? `Raw value: ${rawValue}; formatted value: ${formattedValue ?? ''}`
          : undefined
      }
      decimalPlaces={3}
    />
  );
};

export const Password = () => {
  const [rawValue, setRawValue] = useState();
  const [formattedValue, setFormattedValue] = useState();
  return (
    <TextInput
      label="Password"
      onChange={(r, f) => {
        setRawValue(r);
        setFormattedValue(f);
      }}
      value={rawValue}
      type="password"
      hideValueButtonLabel="hide"
      revealValueButtonLabel="show"
      description={
        rawValue
          ? `Raw value: ${rawValue}; formatted value: ${formattedValue ?? ''}`
          : undefined
      }
    />
  );
};

export const Currency = () => {
  const [rawValue, setRawValue] = useState();
  const [formattedValue, setFormattedValue] = useState();
  return (
    <TextInput
      label="Enter some text"
      onChange={(r, f) => {
        setRawValue(r);
        setFormattedValue(f);
      }}
      value={rawValue}
      type="currency"
      placeholder="$200.00"
      description={
        rawValue
          ? `Raw value: ${rawValue}; formatted value: ${formattedValue ?? ''}`
          : undefined
      }
    />
  );
};

export const GroupedCode = () => {
  const [rawValue, setRawValue] = useState();
  const [formattedValue, setFormattedValue] = useState();
  return (
    <TextInput
      label="Recovery Code"
      onChange={(r, f) => {
        setRawValue(r);
        setFormattedValue(f);
      }}
      value={rawValue}
      type="grouped_code"
      description={
        rawValue
          ? `Raw value: ${rawValue}; formatted value: ${formattedValue ?? ''}`
          : undefined
      }
    />
  );
};

export const ExternalLabel = () => {
  const [demoValue, setDemoValue] = useState();
  return (
    <TextInput
      label="External Label"
      labelStyle="external"
      onChange={setDemoValue}
      value={demoValue}
      type="text"
      placeholder="Placeholder"
    />
  );
};

export const ExternalLargeLabel = () => {
  const [demoValue, setDemoValue] = useState();
  return (
    <TextInput
      label="External Label (Large)"
      labelStyle="external-large"
      onChange={setDemoValue}
      value={demoValue}
      type="text"
      placeholder="Placeholder"
    />
  );
};

export const CustomFontSize = () => {
  const [demoValue, setDemoValue] = useState();
  return (
    <TextInput
      label="Custom font size"
      onChange={setDemoValue}
      value={demoValue}
      type="text"
      placeholder="Placeholder"
      fontSize="f5"
    />
  );
};

export const FocusOnMount = () => (
  <TextInput
    label="Omg a label"
    placeholder="Look a placeholder that's really long!"
    focusOnMount
    onChange={action('onChange')}
  />
);

export const CurrencyFourDecimals = () => (
  <TextInput
    label="4 Decimal Currency"
    placeholder="Enter some money"
    type="currency"
    value={1234.56789}
    decimalPlaces={4}
    onChange={action('onChange')}
  />
);

export const CurrencyPoundSterling = () => (
  <TextInput
    label="Pounds Sterling"
    placeholder="Enter some money"
    type="currency"
    value={1234.56789}
    currencyCode="GBP"
    onChange={action('onChange')}
  />
);

export const DeprecatedHiddenLabel = () => (
  <TextInput
    label="Label"
    labelStyle="hidden"
    placeholder="Enter some money"
    onChange={action('onChange')}
  />
);

export const Disabled = () => (
  <TextInput
    label="Label"
    placeholder="Disabled"
    onChange={action('onChange')}
    disabled
  />
);

export const DisabledWithValue = () => (
  <TextInput
    label="Label"
    placeholder="Disabled with value"
    onChange={action('onChange')}
    disabled
    value="Some value"
  />
);

export const LongPlaceholder = () => (
  <Box stacked="row">
    <TextInput
      basis={300}
      label="Label"
      placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia mi sit amet nunc viverra lacinia."
      onChange={action('onChange')}
      focusOnMount
    />
  </Box>
);

export const LongValue = () => (
  <Box stacked="row">
    <TextInput
      basis={300}
      label="Label"
      value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia mi sit amet nunc viverra lacinia."
      onChange={action('onChange')}
    />
  </Box>
);

export const LongValueWithIcon = () => (
  <Box stacked="row">
    <TextInput
      basis={300}
      label="Label"
      value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia mi sit amet nunc viverra lacinia."
      onChange={action('onChange')}
      error
    />
  </Box>
);

export const LongLabel = () => (
  <Box stacked="row">
    <TextInput
      basis={300}
      label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia mi sit amet nunc viverra lacinia."
      onChange={action('onChange')}
    />
  </Box>
);

export const LongLabelWithValue = () => (
  <Box stacked="row">
    <TextInput
      basis={300}
      label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia mi sit amet nunc viverra lacinia."
      value="some text"
      onChange={action('onChange')}
    />
  </Box>
);

const StyledTextInput = styled(TextInput)`
  width: 400px;
  padding-right: 25px;
  border: 5px solid red;
`;

export const WithExtendedStyles = () => (
  <StyledTextInput
    label="Omg a label"
    placeholder="Look a placeholder that's really long!"
    focusOnMount
    onChange={action('onChange')}
  />
);

export const MixinsSpacing = () => (
  <>
    <PaddingChecker
      Component={TextInput}
      label="Label"
      onChange={action('onChange')}
    />
    <MarginChecker
      Component={TextInput}
      label="Label"
      onChange={action('onChange')}
    />
  </>
);

export const MixinsStackee = () => (
  <StackeeChecker
    Component={TextInput}
    label="Label"
    onChange={action('onChange')}
  />
);

export const InlineHeightComparisonFloatingLabel = () => (
  <Box stacked="row" align="end">
    <TextInput basis={200} label="Label" />
    <TextInput basis={200} label="Label" type="search" />
    <TextInput basis={200} label="Label" error />
    <TextInput basis={200} label="Label" locked />
    <Button>Click me</Button>
    <SecondaryButton>Click me</SecondaryButton>
  </Box>
);

export const InlineHeightComparisonExternalLabel = () => (
  <Box stacked="row" align="end">
    <TextInput labelStyle="external" basis={200} label="Label" />
    <TextInput labelStyle="external" basis={200} label="Label" type="search" />
    <TextInput labelStyle="external" basis={200} label="Label" error />
    <TextInput labelStyle="external" basis={200} label="Label" locked />
    <Button size="sm">Click me</Button>
    <TertiaryButton>Click me</TertiaryButton>
  </Box>
);

export const InlineHeightComparisonExternalLargeLabel = () => (
  <Box stacked="row" align="end">
    <TextInput labelStyle="external-large" basis={200} label="Label" />
    <TextInput
      labelStyle="external-large"
      basis={200}
      label="Label"
      type="search"
    />
    <TextInput labelStyle="external-large" basis={200} label="Label" error />
    <TextInput labelStyle="external-large" basis={200} label="Label" locked />
    <Button>Click me</Button>
    <SecondaryButton>Click me</SecondaryButton>
  </Box>
);
