import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import Picker from '../picker';
import { times } from './utils';
import { range, padZero } from '../utils';
import { useUpdateEffect } from '../hooks';
var TimePicker = /*#__PURE__*/forwardRef(function (props, ref) {
  var formatValue = function formatValue(value) {
    var minHour = props.minHour,
        maxHour = props.maxHour,
        maxMinute = props.maxMinute,
        minMinute = props.minMinute;

    if (!value) {
      value = padZero(minHour) + ":" + padZero(minMinute);
    }

    var _value$split = value.split(':'),
        hour = _value$split[0],
        minute = _value$split[1];

    hour = padZero(range(hour, +minHour, +maxHour));
    minute = padZero(range(minute, +minMinute, +maxMinute));
    return hour + ":" + minute;
  };

  var picker = useRef(null);

  var _useState = useState(function () {
    return formatValue(props.value);
  }),
      currentDate = _useState[0],
      setCurrentDate = _useState[1];

  var currentDateRef = useRef();
  currentDateRef.current = currentDate;
  var ranges = useMemo(function () {
    return [{
      type: 'hour',
      range: [+props.minHour, +props.maxHour]
    }, {
      type: 'minute',
      range: [+props.minMinute, +props.maxMinute]
    }];
  }, [props.minHour, props.maxHour, props.minMinute, props.maxMinute]);
  var originColumns = useMemo(function () {
    return ranges.map(function (_ref) {
      var type = _ref.type,
          rangeArr = _ref.range;
      var values = times(rangeArr[1] - rangeArr[0] + 1, function (index) {
        return padZero(rangeArr[0] + index);
      });

      if (props.filter) {
        values = props.filter(type, values);
      }

      return {
        type: type,
        values: values
      };
    });
  }, [ranges]);
  var columns = useMemo(function () {
    return originColumns.map(function (column) {
      return {
        values: column.values.map(function (value) {
          return props.formatter(column.type, value);
        })
      };
    });
  }, [originColumns]);

  var updateColumnValue = function updateColumnValue() {
    var pair = currentDateRef.current.split(':');
    var values = [props.formatter('hour', pair[0]), props.formatter('minute', pair[1])];
    setTimeout(function () {
      picker.current.setValues(values);
    }, 0);
  };

  var updateInnerValue = function updateInnerValue() {
    var _picker$current$getIn = picker.current.getIndexes(),
        hourIndex = _picker$current$getIn[0],
        minuteIndex = _picker$current$getIn[1];

    var hourColumn = originColumns[0],
        minuteColumn = originColumns[1];
    var hour = hourColumn.values[hourIndex] || hourColumn.values[0];
    var minute = minuteColumn.values[minuteIndex] || minuteColumn.values[0];
    setCurrentDate(formatValue(hour + ":" + minute));
    updateColumnValue();
  };

  var onConfirm = function onConfirm() {
    if (props.onConfirm) props.onConfirm(currentDateRef.current);
  };

  var onCancel = function onCancel() {
    if (props.onCancel) props.onCancel();
  };

  var onChange = function onChange() {
    updateInnerValue();

    if (props.onChange) {
      props.onChange(currentDateRef.current);
    }
  };

  useEffect(function () {
    updateColumnValue();
  }, [columns]);
  useUpdateEffect(function () {
    updateInnerValue();
  }, [props.filter, props.maxHour, props.minMinute, props.maxMinute]);
  useUpdateEffect(function () {
    setTimeout(updateInnerValue, 0);
  }, [props.minHour]);
  useUpdateEffect(function () {
    var value = formatValue(props.value);

    if (value !== currentDate) {
      setCurrentDate(value);
      updateColumnValue();
    }
  }, [props.value]);
  useImperativeHandle(ref, function () {
    return {
      getPicker: function getPicker() {
        return picker.current;
      }
    };
  });
  return /*#__PURE__*/React.createElement(Picker, {
    ref: picker,
    columns: columns,
    readonly: props.readonly,
    onChange: onChange,
    onConfirm: onConfirm,
    onCancel: onCancel,
    title: props.title,
    loading: props.loading,
    showToolbar: props.showToolbar,
    cancelButtonText: props.cancelButtonText,
    confirmButtonText: props.confirmButtonText,
    itemHeight: props.itemHeight,
    visibleItemCount: props.visibleItemCount,
    swipeDuration: props.swipeDuration
  });
});
TimePicker.defaultProps = {
  minHour: 0,
  maxHour: 23,
  minMinute: 0,
  maxMinute: 59,
  formatter: function formatter(type, value) {
    return value;
  }
};
export default TimePicker;