import React from 'react';
import { useLocale } from '../Locale/locale';
import { Text, View } from 'react-native';
import { DatePicker, DatePickerProps } from '@xrnjs/ui';
import createStyle from './style';
import { useTheme } from '../Theme/Theme';
import { InputProps } from '../Input/interface';

export type DateRangeProps = Omit<
  DatePickerProps,
  'value' | 'defaultValue' | 'onConfirm'
> & {
  status?: 'error';
  disabled?: boolean;
  formatter?: (date: Date, mode: string) => string;
  inputProps?: InputProps;
  placeholder?: [string, string];
  onConfirm?: (value: (Date | undefined)[]) => void;
  value?: [Date, Date];
  defaultValue?: [Date, Date];
};

function DateRange(props: DateRangeProps) {
  const langValues = useLocale().DatePickerRangeView;
  const token = useTheme();
  const styles = createStyle(token);

  const {
    onConfirm,
    placeholder = [langValues.labelStartTime, langValues.labelEndTime],
    disabled,
    inputProps,
    value,
    status,
    defaultValue,
    ...resetProps
  } = props;

  const startPlaceholder = placeholder[0];
  const endPlaceholder = placeholder[1];
  const startValue = value?.[0]; // 开始时间 Date
  const endValue = value?.[1]; // 结束时间 Date

  const combinedOnChange = (currentDate: Date, type: 'start' | 'end') => {
    const isStart = type === 'start';
    const currentValue = [
      isStart ? currentDate : value?.[0],
      isStart ? value?.[1] : currentDate,
    ];
    onConfirm?.(currentValue);
  };

  return (
    <View style={styles.dateRangePicker}>
      <DatePicker.Input
        value={startValue}
        placeholder={startPlaceholder}
        disabled={disabled}
        style={styles.flex}
        status={status}
        inputProps={{
          suffixStyle: styles.suffixIcon,
          ...inputProps,
        }}
        defaultValue={defaultValue?.[0]}
        title={langValues.labelStartTime}
        min={undefined}
        max={endValue ?? undefined}
        {...resetProps}
        onConfirm={(value: Date) => combinedOnChange(value, 'start')}
      />
      <Text style={styles.connect}>~</Text>
      <DatePicker.Input
        value={endValue}
        placeholder={endPlaceholder}
        disabled={disabled}
        style={styles.flex}
        status={status}
        inputProps={{
          suffixStyle: styles.suffixIcon,
          ...inputProps,
        }}
        defaultValue={defaultValue?.[1]}
        title={langValues.labelEndTime}
        min={startValue ?? undefined}
        {...resetProps}
        onConfirm={(value: Date) => combinedOnChange(value, 'end')}
      />
    </View>
  );
}

export default DateRange;