import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import DatePicker from '../DatePicker';
import { useState } from 'react';
import { ptBR, enUS, ja, ar } from 'date-fns/locale';

<Meta
  title="Components/Date/DatePicker"
  component={DatePicker}
  decorators={[(storyFn) => <div>{storyFn()}</div>]}
  parameters={{
    layout: 'centered',
  }}
/>

# Date Picker APIs

The API documentation of the DatePicker React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { DatePicker } from '@useblu/ocean-react';
```

## Usage

```jsx
import { useState } from 'react';
import { DatePicker } from '@useblu/ocean-react';
import { enUS } from 'date-fns/locale'; // Any locate object (default pt-BR)

const [date, setDate] = useState();

const handleSelectDate = (date) => setDate(date);

const label = 'Your date'

<DatePicker
  label={label}
  value={date}
  onSelect={handleSelectDate}
  locale={enUS}
/>;
```

## Props

<ArgsTable story="Playground" of="." />

## CSS

| Global class                          | Description                                          |
| ------------------------------------- | ---------------------------------------------------- |
| .ods-date                             | Styles applied to the root element.                  |
| .ods-date\_\_calendar                 | Styles applied to the date modal.                    |
| .ods-date\_\_caption-single           | Styles applied to the date modal month title.        |
| .ods-date\_\_navButtons               | Styles applied to the date modal arrows buttons.     |
| .ods-date\_\_navButtonPrev-datepicker | Styles applied to the date modal left arrow button.  |
| .ods-date\_\_navButtonNext-datepicker | Styles applied to the date modal right arrow button. |
| .ods-date\_\_navIcon                  | Styles applied to the date modal buttons icon.       |
| .ods-date\_\_table                    | Styles applied to the date modal general table.      |
| .ods-date\_\_head                     | Styles applied to the date modal table head.         |
| .ods-date\_\_headRow                  | Styles applied to the date modal table head row.     |
| .ods-date\_\_body                     | Styles applied to the date modal table modal.        |
| .ods-date\_\_row                      | Styles applied to the date modal all table rows.     |
| .ods-date\_\_cell                     | Styles applied to the date modal table cell.         |
| .ods-date\_\_day                      | Styles applied to the date modal number day.         |
| .ods-date\_\_today                    | Styles applied to the date modal today number.       |
| .ods-date\_\_selected                 | Styles applied to the date modal selected days.      |
| .ods-date\_\_disabled                 | Styles applied to the date modal disabled days.      |
| .ods-date\_\_selectedStart            | Styles applied to the date modal range start day.    |
| .ods-date\_\_selectedEnd              | Styles applied to the date modal range end day.      |
| .ods-date\_\_selectedMiddle           | Styles applied to the date modal range middle days.  |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Date/DatePicker.tsx) for more detail. -->

export const DinamicDatePicker = (props) => {
  const [date, setDate] = useState();
  const handleSelectDate = (date) => setDate(date);
  return (
    <div
      style={{
        width: '100%',
        height: '400px',
        display: 'flex',
        justifyContent: 'center',
      }}
    >
      <div style={{ width: '100%' }}>
        <DatePicker value={date} onSelect={handleSelectDate} {...props} />
      </div>
    </div>
  );
};

export const selectLocation = (locale) => {
  const locales = {
    portuguese: ptBR,
    english: enUS,
    japanese: ja,
    arabic: ar,
  };
  return locales[locale];
};

## Playground

<Canvas withSource="close" withToolbar>
  <Story
    name="Playground"
    args={{
      label: 'Your date',
      value: '',
      onSelect: () => null,
      helperText: 'Some text error here!',
      startsToday: false,
      editable: false,
      error: false,
      disabled: false,
      locale: 'pt-BR',
    }}
    argTypes={{
      label: {
        control: 'text',
        description: 'Determines name of input',
        type: { name: 'string', required: false },
        table: {
          type: { summary: 'string' },
          defaultValue: { summary: '' },
        },
      },
      value: {
        control: null,
        description: 'Determines value of input',
        type: { name: 'string', required: true },
        table: {
          type: { summary: 'string' },
          defaultValue: { summary: null },
        },
      },
      onSelect: {
        control: null,
        description: 'Determines the function to change field',
        type: { required: true },
        table: {
          type: { summary: 'function' },
          defaultValue: { summary: null },
        },
      },
      startsToday: {
        control: 'boolean',
        description: 'Determines if date seleting starts today',
        default: false,
        table: {
          type: { summary: 'boolean' },
          defaultValue: { summary: false },
        },
      },
      helperText: {
        control: 'text',
        description: 'Determines error message',
        default: '',
        table: {
          type: { summary: 'string' },
          defaultValue: { summary: '' },
        },
      },
      editable: {
        control: 'boolean',
        description: 'Determines if date inputs are editable',
        default: false,
        table: {
          type: { summary: 'boolean' },
          defaultValue: { summary: false },
        },
      },
      error: {
        control: 'boolean',
        description: 'Determines error of input',
        default: false,
        table: {
          type: { summary: 'boolean' },
          defaultValue: { summary: false },
        },
      },
      disabled: {
        control: 'boolean',
        description: 'Determines if date input are disabled',
        default: false,
        table: {
          type: { summary: 'boolean' },
          defaultValue: { summary: false },
        },
      },
      locale: {
        options: ['portuguese', 'english', 'japanese', 'arabic'],
        control: { type: 'select' },
        description:
          'Object locale of date-fns locale package (internationalize)',
        defaultValue: ptBR,
        table: {
          type: { summary: 'object' },
          defaultValue: { summary: 'ptBR' },
        },
      },
    }}
  >
    {(props) => (
      <DinamicDatePicker
        label={props.label}
        error={props.error}
        disabled={props.disabled}
        editable={props.editable}
        locale={selectLocation(props.locale)}
        startsToday={props.startsToday}
        helperText={props.helperText}
      />
    )}
  </Story>
</Canvas>
