import React from 'react';
import { Shelf, Stack } from '../Layout';
import { Text } from '../Text';
import Loader from '../Loader';
import Icon from '../Icon';
import DatePicker from '.';
import Button from '../Button';
import Card from '../Card';

export default {
  title: 'Components|DatePicker',
  component: DatePicker,
};

export const Index = () => {
  const [{ startDate, endDate }, setRange] = React.useState({
    startDate: new Date(2022, 0, 1),
    endDate: new Date(2022, 0, 3),
  });

  const [date, setDate] = React.useState(new Date());

  return (
    <Shelf>
      <Stack>
        <Button onClick={() => setRange({ startDate: new Date(), endDate: new Date() })}>
          Change range
        </Button>
        <Text>Controlled Ranged DatePicker</Text>
        <Text>
          Selected dates: {startDate.toDateString()} - {endDate ? endDate.toDateString() : ''}
        </Text>
        <DatePicker selectsRange onChange={setRange} value={{ startDate, endDate }} />
        <Text>Uncontrolled Ranged DatePicker</Text>
        <DatePicker selectsRange shouldCloseOnSelect />
        <Text>Uncontrolled Single DatePicker</Text>
        <DatePicker shouldCloseOnSelect />
        <Text>Uncontrolled Single Footer</Text>
        <DatePicker
          onChange={(date) => alert(date)}
          footer={({ startDate, setDate }) => (
            <Stack>
              <Text>{startDate.toDateString()}</Text>
              <Button appearance="secondary" onClick={() => setDate(new Date())}>
                Today
              </Button>
            </Stack>
          )}
        />
        <Text>Uncontrolled Ranged Footer</Text>
        <DatePicker
          selectsRange
          footer={({ startDate, endDate, setDates }) => (
            <Stack>
              <Text>
                {startDate.toDateString()} - {endDate ? endDate.toDateString() : ''}
              </Text>
              <Button
                appearance="secondary"
                onClick={() => setDates({ startDate: new Date(0), endDate: new Date() })}
              >
                Forever
              </Button>
            </Stack>
          )}
        />
        <Text>Controlled Single DatePicker</Text>
        <Text>Selected date: {date.toDateString()}</Text>
        <DatePicker onChange={setDate} value={date} />
        <Text>Disabled and empty value</Text>
        <DatePicker disabled onChange={setDate} value={null} />
        <Text>Loading</Text>
        <DatePicker loading onChange={setDate} value={date} />
        <Text>Custom Target - Basic</Text>
        <DatePicker
          onChange={setDate}
          value={date}
          customTarget={({ value, disabled, loading, onClick }) => (
            <div
              onClick={onClick}
              style={{
                padding: '8px 12px',
                border: '1px solid #ccc',
                borderRadius: '4px',
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                opacity: disabled ? 0.6 : 1,
              }}
            >
              <span>{value}</span>
              {loading ? (
                <Loader size={16} />
              ) : (
                <Icon name="calendar" size={16} color="Mid Neutral 2" />
              )}
            </div>
          )}
        />
        <Text>Custom Target - Button Style</Text>
        <DatePicker
          onChange={setDate}
          value={date}
          customTarget={({ value, disabled, loading, onClick }) => (
            <Button
              onClick={onClick}
              disabled={disabled}
              appearance="primary"
              intent="success"
              iconAfter={
                loading ? <Loader size={16} color="white" /> : <Icon name="calendar" size={16} />
              }
            >
              {value}
            </Button>
          )}
        />
        <Text>Custom Target - Minimal</Text>
        <DatePicker
          onChange={setDate}
          value={date}
          customTarget={({ onClick }) => (
            <div onClick={onClick} style={{ display: 'inline-block', cursor: 'pointer' }}>
              <Icon name="calendar" size={24} color="Dark Neutral 1" />
            </div>
          )}
        />
        <Text>No Target</Text>
        <Card>
          <DatePicker
            onChange={setDate}
            value={date}
            noTarget
            footer={({ startDate, setDate }) => (
              <Shelf justifyContent="center">
                <Text>{startDate.toDateString()}</Text>
                <Button appearance="secondary" onClick={() => setDate(new Date())}>
                  Today
                </Button>
              </Shelf>
            )}
          />
        </Card>
        <Text>Min Date</Text>
        <DatePicker minDate={new Date()} onChange={setDate} value={date} />
      </Stack>
    </Shelf>
  );
};