/**
 * TEAM: frontend_infra
 * @flow
 */

import * as React from "react";
import {css} from "aphrodite";
import {
  type DemoFile,
  text,
  bool,
  calendarDate,
  textInputSizeKnob,
  demoCommonStyles,
} from "../../demoTypes";
import CalendarDateInput from "../CalendarDateInput";
import {type CalendarDate, today} from "../CalendarDateType";

import CalendarDateInputSimple from "./CalendarDateInputSimple.demo";
import CalendarDateInputDisabled from "./CalendarDateInputDisabled.demo";
import CalendarDateInputInvalid from "./CalendarDateInputInvalid.demo";

const demos: DemoFile = {
  demos: [
    {
      type: "live",
      example: CalendarDateInputSimple,
    },
    {
      type: "live",
      example: CalendarDateInputDisabled,
    },
    {
      type: "live",
      example: CalendarDateInputInvalid,
    },
    {
      type: "full",
      example: (elementToCodeFn, demoProps) => (
        <CalendarDateShim
          elementToCodeFn={elementToCodeFn}
          demoProps={demoProps}
        />
      ),
      knobs: {
        disabled: bool(false),
        isInvalid: bool(false),
        dateFormatString: text("YYYY-MM-DD"),
        minDate: calendarDate(),
        maxDate: calendarDate(),
        size: textInputSizeKnob,
        showWeekNumbers: bool(false),
      },
    },
  ],
};

type DemoProps = {
  disabled?: boolean,
  isInvalid?: boolean,
  ...
};

export class CalendarDateShim extends React.PureComponent<
  {
    +elementToCodeFn?: React.Node => void,
    +demoProps?: DemoProps,
    ...
  },
  {value: CalendarDate | null, ...}
> {
  static defaultProps: {|disabled: boolean, isInvalid: boolean|} = {
    disabled: false,
    isInvalid: false,
  };
  state: {value: CalendarDate | null, ...} = {
    value: today("America/Los_Angeles"),
  };

  handleChange: (value: CalendarDate | null) => void = (
    value: CalendarDate | null
  ) => {
    this.setState({value});
  };

  render(): React.Element<"div"> {
    const element = (
      <div className={css(demoCommonStyles.v2wrapper)}>
        {/* $FlowFixMe[cannot-spread-inexact] upgrade 0.121.1 -> 0.122.0 */}
        <CalendarDateInput
          value={this.state.value}
          onChange={this.handleChange}
          {...this.props.demoProps}
        />
      </div>
    );
    // eslint-disable-next-line prefer-destructuring
    const elementToCodeFn = this.props.elementToCodeFn;
    // eslint-disable-next-line no-unused-expressions
    elementToCodeFn && elementToCodeFn(element);
    return element;
  }
}

export default demos;