import { text } from '@storybook/addon-knobs';
import { userEvent, within } from '@storybook/test';

import InputWithDisplayFormat from '.';
import { Field } from '../field/Field';

export default {
  component: InputWithDisplayFormat,
  title: 'Forms/InputWithDisplayFormat',
};

export const Basic = () => {
  const placeholder = text('Placeholder', '**-**-**');
  const displayPattern = text('DisplayPattern', '**-**-**');

  return (
    <Field label="Display pattern is controlled via knobs" id="Basic">
      <InputWithDisplayFormat
        id="Basic"
        placeholder={placeholder}
        displayPattern={displayPattern}
        className="form-control"
        onChange={(v) => console.log(v)}
        onBlur={(v) => console.log(v)}
        onFocus={(v) => console.log(v)}
      />
    </Field>
  );
};

const Template = (args) => {
  const placeholder = args.pattern;
  const displayPattern = args.pattern;
  const label = args.label;
  const id = label.replaceAll(' ', '-').toLowerCase();

  return (
    <Field label={label} id={id}>
      <InputWithDisplayFormat
        id={id}
        placeholder={placeholder}
        displayPattern={displayPattern}
        className="form-control"
        onChange={(v) => console.log(v)}
        onBlur={(v) => console.log(v)}
        onFocus={(v) => console.log(v)}
      />
    </Field>
  );
};

export const CardNumber = Template.bind({});
CardNumber.args = {
  label: 'Card Number',
  pattern: '**** **** **** **** ***',
};

export const CVC = Template.bind({});
CVC.args = {
  label: 'CVC',
  pattern: '***',
};

export const ExpiryDate = Template.bind({});
ExpiryDate.args = {
  label: 'Expiry Date',
  pattern: '** / **',
};

export const SecurityPin = Template.bind({});
SecurityPin.args = {
  label: 'Security Pin',
  pattern: '*-*-*-*-*-*',
};

export const SecurityPinPlay = Template.bind({});
SecurityPinPlay.args = {
  label: 'Security Pin',
  pattern: '*-*-*-*-*-*',
};

SecurityPinPlay.play = async ({ canvasElement }) => {
  const canvas = within(canvasElement);
  await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
};
