import { TouchableOpacity, View, useWindowDimensions } from 'react-native';
import { SvgXml } from 'react-native-svg';
import { useStyles } from '../styles';
import { arrowLeft } from '../../../../../core/assets/icons';
import { Typography } from '../../../../../core/components/Typography/Typography';
import dayjs from 'dayjs';
import DateTimePicker, { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
import { usePollPostComposerContext } from '../PollPostComposer';
export function AndroidPollDurationPicker() {
  const {
    styles
  } = useStyles();
  const {
    duration,
    selectedDate,
    setSelectedTime,
    selectedTime,
    setSelectedDate
  } = usePollPostComposerContext();
  const endOn = dayjs().add(duration.value, 'day');
  const isCustom = duration.value === 0;
  const openDatePicker = () => {
    DateTimePickerAndroid.open({
      mode: 'date',
      value: selectedDate,
      minimumDate: dayjs().toDate(),
      maximumDate: dayjs().add(1, 'month').toDate(),
      onChange: (event, date) => {
        if (event.type === 'set' && date) {
          setSelectedDate(date);
        }
      }
    });
  };
  const openTimePicker = () => {
    DateTimePickerAndroid.open({
      mode: 'time',
      value: selectedTime,
      is24Hour: true,
      onChange: (event, time) => {
        if (event.type === 'set' && time) {
          setSelectedTime(time);
        }
      }
    });
  };
  return /*#__PURE__*/React.createElement(View, null, !isCustom ? /*#__PURE__*/React.createElement(Typography.Caption, {
    style: styles.base
  }, "Ends on ", endOn.format('DD MMM'), " at ", endOn.format('HH:mm A')) : /*#__PURE__*/React.createElement(View, {
    style: styles.androidDateTimeContainer
  }, /*#__PURE__*/React.createElement(Typography.Body, {
    style: styles.base
  }, "Ends on"), /*#__PURE__*/React.createElement(View, {
    style: styles.androidDateTimeContainer
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: styles.androidDateTimeButton,
    onPress: openDatePicker
  }, /*#__PURE__*/React.createElement(Typography.Body, {
    style: styles.base
  }, dayjs(selectedDate).format('DD MMM YYYY'))), /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: styles.androidDateTimeButton,
    onPress: openTimePicker
  }, /*#__PURE__*/React.createElement(Typography.Body, {
    style: styles.base
  }, dayjs(selectedTime).format('HH:mm A'))))));
}
export function IOSPollDurationPicker() {
  const {
    styles,
    theme
  } = useStyles();
  const {
    width
  } = useWindowDimensions();
  const {
    setDuration,
    selectedDate,
    bottomSheetRef,
    setSelectedDate,
    setIsShowingDatePicker
  } = usePollPostComposerContext();
  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
    style: styles.iOSDateTimeHeader
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: () => setIsShowingDatePicker(false)
  }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(SvgXml, {
    width: "24",
    height: "24",
    xml: arrowLeft(),
    color: theme.colors.base
  }))), /*#__PURE__*/React.createElement(Typography.TitleBold, {
    style: styles.base
  }, "Ends on"), /*#__PURE__*/React.createElement(TouchableOpacity, {
    disabled: !selectedDate,
    onPress: () => {
      var _bottomSheetRef$curre;
      (_bottomSheetRef$curre = bottomSheetRef.current) === null || _bottomSheetRef$curre === void 0 || _bottomSheetRef$curre.close();
      setDuration({
        value: 0,
        label: `End on ${dayjs(selectedDate).format('DD MMM')} at ${dayjs(selectedDate).format('HH:mm A')}`
      });
    }
  }, /*#__PURE__*/React.createElement(Typography.Body, {
    style: [styles.cta, !selectedDate && styles.disabled]
  }, "Done"))), /*#__PURE__*/React.createElement(DateTimePicker, {
    locale: "en_US",
    mode: "datetime",
    display: "inline",
    value: selectedDate,
    minimumDate: dayjs().toDate(),
    style: [styles.iOSDateTimePicker, {
      width
    }],
    accentColor: theme.colors.primary,
    maximumDate: dayjs().add(1, 'month').toDate(),
    onChange: (event, date) => {
      if (event.type === 'set') {
        setSelectedDate(date);
      }
    }
  }));
}
//# sourceMappingURL=PollDurationPicker.js.map