import * as React from 'react';
import { IntlProvider } from 'react-intl';
import { State, Store } from '@sambego/storybook-state';
import { TooltipPosition } from '../tooltip';
import DatePicker from './DatePicker';
import notes from './DatePicker.stories.md';
import { bdlGray10 } from '../../styles/variables';
export var basic = function basic() {
  var MIN_TIME = new Date(0);
  var TODAY = new Date('July 18, 2018');
  var yearRange = [MIN_TIME.getFullYear(), TODAY.getFullYear()];
  var componentStore = new Store({
    date: new Date('July 9, 2018'),
    fromDate: null,
    toDate: null
  });
  return /*#__PURE__*/React.createElement(State, {
    store: componentStore
  }, function (state) {
    return /*#__PURE__*/React.createElement(IntlProvider, {
      locale: "en-US"
    }, /*#__PURE__*/React.createElement(DatePicker, {
      className: "date-picker-example",
      displayFormat: {
        day: 'numeric',
        month: 'long',
        year: 'numeric'
      },
      label: "Date",
      name: "datepicker",
      onChange: function onChange(date) {
        componentStore.set({
          date: date
        });
      },
      placeholder: "Date",
      value: state.date,
      yearRange: yearRange
    }));
  });
};
export var withDescription = function withDescription() {
  return /*#__PURE__*/React.createElement(IntlProvider, {
    locale: "en-US"
  }, /*#__PURE__*/React.createElement(DatePicker, {
    placeholder: "Date",
    description: "Date of your birth",
    label: "Date Picker"
  }));
};
export var manuallyEditable = function manuallyEditable() {
  return /*#__PURE__*/React.createElement(IntlProvider, {
    locale: "en-US"
  }, /*#__PURE__*/React.createElement(DatePicker, {
    isTextInputAllowed: true,
    placeholder: "Date",
    label: "Date Picker",
    value: new Date('September 27, 2019')
  }));
};
export var withLimitedDateRange = function withLimitedDateRange() {
  var maxDate = new Date('February 25, 2021');
  var sixDays = 1000 * 60 * 60 * 24 * 6;
  var minDate = new Date(maxDate.valueOf() - sixDays);
  var componentStore = new Store({
    date: maxDate,
    fromDate: null,
    toDate: null
  });
  return /*#__PURE__*/React.createElement(State, {
    store: componentStore
  }, function (state) {
    return /*#__PURE__*/React.createElement(IntlProvider, {
      locale: "en-US"
    }, /*#__PURE__*/React.createElement(DatePicker, {
      isTextInputAllowed: true,
      placeholder: "Date",
      label: "Date Picker",
      minDate: minDate,
      maxDate: maxDate,
      value: state.date
    }));
  });
};
export var alwaysVisibleWithCustomInputField = function alwaysVisibleWithCustomInputField() {
  var componentStore = new Store({
    date: new Date('February 26, 2021'),
    fromDate: null,
    toDate: null
  });
  return /*#__PURE__*/React.createElement(State, {
    store: componentStore
  }, function (state) {
    var customInput = /*#__PURE__*/React.createElement("input", {
      style: {
        display: 'none'
      }
    });
    return /*#__PURE__*/React.createElement(IntlProvider, {
      locale: "en-US"
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        justifyContent: 'center'
      }
    }, /*#__PURE__*/React.createElement(DatePicker, {
      className: "date-picker-example",
      customInput: customInput,
      displayFormat: {
        day: 'numeric',
        month: 'short',
        year: 'numeric'
      },
      hideLabel: true,
      isAlwaysVisible: true,
      isClearable: false,
      label: "Date",
      name: "datepicker",
      onChange: function onChange(date) {
        componentStore.set({
          date: date
        });
      },
      placeholder: "Date",
      value: state.date
    }), /*#__PURE__*/React.createElement("div", {
      style: {
        margin: '20px 30px',
        width: '400px'
      }
    }, /*#__PURE__*/React.createElement("p", null, "In this example, the DatePicker is bound to a custom hidden input field. The right panel retains the same state as the DatePicker, but is not contained within the DatePicker component."), /*#__PURE__*/React.createElement("div", {
      style: {
        position: 'relative'
      }
    }, /*#__PURE__*/React.createElement("label", {
      htmlFor: "date-picker-custom-input",
      style: {
        position: 'absolute',
        left: '10px',
        top: '6px',
        zIndex: 100
      }
    }, "Start Date"), /*#__PURE__*/React.createElement("input", {
      name: "date-picker-custom-input",
      style: {
        background: bdlGray10,
        border: 0,
        borderRadius: '4px',
        padding: '.5em .8em',
        width: '19em',
        height: '2.5em',
        top: 0,
        outline: 'none',
        textAlign: 'right'
      },
      value: state.date.toDateString()
    })))));
  });
};
export var disabledWithErrorMessage = function disabledWithErrorMessage() {
  return /*#__PURE__*/React.createElement(IntlProvider, {
    locale: "en-US"
  }, /*#__PURE__*/React.createElement(DatePicker, {
    isDisabled: true,
    error: "Error Message",
    placeholder: "Date",
    name: "datepicker",
    label: "Disabled Date Picker"
  }));
};
export var customErrorTooltipPosition = function customErrorTooltipPosition() {
  return /*#__PURE__*/React.createElement(IntlProvider, {
    locale: "en-US"
  }, /*#__PURE__*/React.createElement(DatePicker, {
    error: "Error Message",
    errorTooltipPosition: TooltipPosition.MIDDLE_RIGHT,
    placeholder: "Date",
    name: "datepicker",
    label: "Disabled Date Picker"
  }));
};
export var withRange = function withRange() {
  var MAX_TIME = new Date('3000-01-01T00:00:00.000Z');
  var MIN_TIME = new Date(0);
  var TODAY = new Date();
  var componentStore = new Store({
    date: new Date(),
    fromDate: null,
    toDate: null
  });
  return /*#__PURE__*/React.createElement(State, {
    store: componentStore
  }, function (state) {
    return /*#__PURE__*/React.createElement(IntlProvider, {
      locale: "en-US"
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DatePicker, {
      className: "date-picker-example",
      displayFormat: {
        day: 'numeric',
        month: 'long',
        year: 'numeric'
      },
      hideOptionalLabel: true,
      label: "From Date",
      maxDate: state.toDate || MAX_TIME,
      name: "datepicker-from",
      onChange: function onChange(date) {
        componentStore.set({
          fromDate: date
        });
      },
      placeholder: "Choose a Date",
      value: state.fromDate
    }), /*#__PURE__*/React.createElement(DatePicker, {
      className: "date-picker-example",
      displayFormat: {
        day: 'numeric',
        month: 'long',
        year: 'numeric'
      },
      hideOptionalLabel: true,
      label: "To Date",
      minDate: state.fromDate || MIN_TIME,
      maxDate: TODAY,
      name: "datepicker-to",
      onChange: function onChange(date) {
        componentStore.set({
          toDate: date
        });
      },
      placeholder: "Choose a Date",
      value: state.toDate
    })));
  });
};
export default {
  title: 'Components|DatePicker',
  component: DatePicker,
  parameters: {
    notes: notes
  }
};
//# sourceMappingURL=DatePicker.stories.js.map