import { View } from "@tarojs/components";
import { Picker, PickerOptions, PickerValue } from "@nutui/nutui-react-taro";
import React, { useState } from "react";

interface ITimeRangePickerProps {
  trigger: React.ReactNode;
  onFinish: (selectedOptions: PickerOptions) => void;
  defaultValue: PickerValue[];
}
const generateTimeOptions = () => {
  const times: PickerOptions = [];
  for (let hour = 0; hour < 24; hour++) {
    for (let minute = 0; minute < 60; minute += 30) {
      const time = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
      times.push({
        label: time,
        value: time,
      });
    }
  }
  return times;
};

export default function TimeRangePicker(props: ITimeRangePickerProps) {
  const { trigger, onFinish, defaultValue } = props;

  const [visible, setVisible] = useState(false);

  const options = [
    // 第一列
    generateTimeOptions(),
    generateTimeOptions(),
  ];

  const confirmPicker = (selectedOptions: PickerOptions) => {
    console.log("confirmPicker", selectedOptions);
    let description = "";
    selectedOptions.forEach((option: any) => {
      option?.label && (description += ` ${option.label}`);
    });

    onFinish(selectedOptions);
  };

  return (
    <View>
      <View onClick={() => setVisible(true)}>{trigger}</View>

      <Picker
        // @ts-ignore
        popupProps={{
          zIndex: 1201,
          portal: () => document.getElementById("page-price"),
        }}
        visible={visible}
        options={options}
        onClose={() => setVisible(false)}
        defaultValue={defaultValue}
        onConfirm={confirmPicker}
      />
    </View>
  );
}
