import { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { TimePicker } from './TimePicker';
import { Box } from '../Box/Box';

<Meta
  title="Components/TimePicker/Overview"
  component={TimePicker}
  parameters={{
    controls: { hideNoControlsWarning: true },
  }}
/>

# TimePicker

Use a TimePicker when you want users to select from a list of a available times agnostic of date.

_NOTE:_ This component is abstracted from the [SelectInput](?path=/docs/components-selectinput-overview--default-story)
and as such includes the same underlying props interface with an added method for generating the time options automatically.

_ABOUT TIME FORMAT:_ While the `value` prop technically returns `{ label: string; value: string; }` the value returned will always
be a JS ISO date string, like this: `2016-07-13T18:46:01.933Z`.

## Props

<ArgsTable of={TimePicker} />

## Default

<Canvas>
  <Story name="Default">
    {() => {
      const [value, setValue] = useState(null);
      return (
        <Box height="360px">
          <TimePicker
            id="defaultTimePicker"
            name="defaultTimePicker"
            onChange={event => {
              setValue(event.target.value);
            }}
            label="Pick a Time"
            value={value}
          />
        </Box>
      );
    }}
  </Story>
</Canvas>

## With A Specific Interval

Pass an `interval` (seconds) value to determine how many times get generated as options.
The example below uses `3600` --> 1 Hour Intervals

<Canvas>
  <Story name="With Interval">
    {() => {
      return (
        <Box height="360px">
          <TimePicker
            id="intervalTimePicker"
            name="intervalTimePicker"
            onChange={() => {}}
            label="Pick a Time"
            interval={3600}
          />
        </Box>
      );
    }}
  </Story>
</Canvas>

## With Min and Max Times

You can determine the range of times to be shown by capping the start and end times.
Use `startTime` and `endTime` for this. The expected values for `hour` and `minute` properties
are `0-24` and `0-60` respectively.

IMPORTANT: `startTime` is inclusive, and `endTime` is exclusive. This is to avoid
the options showing the startTime twice when using a 24-hour cycle.

See example below where we want to show 15 minute increments starting at 9:00AM and ending at 3:30PM.

<Canvas>
  <Story name="With Start and End">
    {() => {
      return (
        <Box height="360px">
          <TimePicker
            id="startEnd"
            name="startEnd"
            onChange={() => {}}
            label="Pick a Time"
            startTime={{ hour: 9, minute: 0 }}
            endTime={{ hour: 15, minute: 31 }}
          />
        </Box>
      );
    }}
  </Story>
</Canvas>

## With Custom Date Display

The labels for the dropdwon options are governed by JS `toLocaleTimeString`, and as such
options are available to customize these.

NOTE: that the option values are always returned as ISO strings regardless of the label display option.

The example below is shown in military (24-hour) time.

<Canvas>
  <Story name="With Custom Date">
    {() => {
      return (
        <Box height="360px">
          <TimePicker
            id="customDate"
            name="customDate"
            onChange={() => {}}
            label="Pick a Time"
            startTime={{ hour: 9, minute: 0 }}
            endTime={{ hour: 15, minute: 31 }}
            dateDisplayOptions={{
              hour12: false,
              hour: '2-digit',
              minute: '2-digit',
            }}
          />
        </Box>
      );
    }}
  </Story>
</Canvas>

## With Open Menu

The menu can be rendered open with the `menuIsOpen` prop. We do this here to confirm option generation
via our UI visual snapshot testing (Chromatic).

<Canvas>
  <Story name="Open Menu">
    {() => {
      const [value, setValue] = useState(null);
      return (
        <Box height="260px">
          <TimePicker
            id="openMenu"
            name="openMenu"
            onChange={event => {
              setValue(event.target.value);
            }}
            label="Pick a Time"
            value={value}
            menuIsOpen
            interval={3600}
            startTime={{ hour: 9, minute: 0 }}
            endTime={{ hour: 13, minute: 1 }}
          />
        </Box>
      );
    }}
  </Story>
</Canvas>

## Help Text

<Canvas>
  <Story name="Help Text">
    {() => {
      const [value, setValue] = useState(null);
      return (
        <Box height="360px">
          <TimePicker
            id="helpText"
            name="helpText"
            onChange={event => {
              setValue(event.target.value);
            }}
            label="Pick a Time"
            value={value}
            helpText="pick a time, any time..."
          />
        </Box>
      );
    }}
  </Story>
</Canvas>

## Sizes

Set the size of the input to `sm`, `md` or `lg`. `md` is the default size.

<Canvas>
  <Story name="Size">
    {() => {
      const [value, setValue] = useState();
      const [value1, setValue1] = useState();
      const [value2, setValue2] = useState();
      return (
        <Box gap="md" height="360px">
          <TimePicker
            id="smTimePicker"
            name="smTimePicker"
            onChange={event => {
              setValue(event.target.value);
            }}
            label="Small"
            value={value}
            size="sm"
          />
          <TimePicker
            id="mdTimePicker"
            name="mdTimePicker"
            onChange={event => {
              setValue1(event.target.value);
            }}
            label="Medium"
            value={value1}
            size="md"
          />
          <TimePicker
            id="lgTimePicker"
            name="lgTimePicker"
            onChange={event => {
              setValue2(event.target.value);
            }}
            label="Large"
            value={value2}
            size="lg"
          />
        </Box>
      );
    }}
  </Story>
</Canvas>
