import React, { useState } from 'react';
import {
  StyleSheet,
  TouchableOpacity,
  View,
  Dimensions,
  Animated,
  Easing,
  ScrollView,
} from 'react-native';
import { Text } from 'react-native-elements';

import * as Colors from './utils/Colors';
import * as Style from './utils/Style';
import TimePicker from './TimePicker';
import type { DateTimePickerProperties } from './properties/Properties';
import { parseDateToCalendarFormat } from './utils/DateUtils';
import { Status } from './utils/Status';
import type Time from './data/Time';
import CalendarWithTimer from './CalendarWithTimer';
const { height } = Dimensions.get('window');

const ModalBottomSheet = (params: DateTimePickerProperties) => {
  const animatedValue = new Animated.Value(0);

  const [startDate, setStartDate] = useState(
    parseDateToCalendarFormat(params.startDate)
  );
  const [endDate, setEndDate] = useState(
    parseDateToCalendarFormat(params.endDate)
  );

  const [isStartDateSelected, setIsStartDateSelected] = useState<boolean>(true);
  const [isEndDateSelected, setIsEndDateSelected] = useState<boolean>(false);

  /* let currentTime = new Date();
  let currentHourRaw = currentTime.getHours();
  let currentHour = currentHourRaw > 12 ? currentHourRaw - 12 : currentHourRaw;
  let currentMinutes = currentTime.getMinutes();
  let currentTimeAmPm = currentTime.getHours() >= 12 ? 'PM' : 'AM'; */

  /* const [startTime, setStartTime] = useState<Time>({
    hour: currentHour,
    minutes: currentMinutes,
    amPm: currentTimeAmPm,
  });

  const [endTime, setEndTime] = useState<Time>({
    hour: currentHour,
    minutes: currentMinutes,
    amPm: currentTimeAmPm,
  }); */

  /*  const [updatedStartTime, setUpdatedStartTime] = useState<Time>({
    hour: currentHour,
    minutes: currentMinutes,
    amPm: currentTimeAmPm,
  });
  const [updatedEndTime, setUpdatedEndTime] = useState<Time>({
    hour: currentHour,
    minutes: currentMinutes,
    amPm: currentTimeAmPm,
  });
 */
  const [updatedStartTime, setUpdatedStartTime] = useState<Time>(
    params?.startTime
  );
  const [updatedEndTime, setUpdatedEndTime] = useState<Time>(params?.endTime);

  React.useEffect(() => {
    Animated.timing(animatedValue, {
      toValue: 1,
      duration: 600,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start();
  }, [params.openBottomSheet]);

  const onDoneSelect = () => {
    params.onDoneSelect(startDate, endDate, updatedStartTime, updatedEndTime);
  };

  const onTimeSelect = (hour: number, minutes: number, amPm: string) => {
    if (isEndDateSelected) {
      setUpdatedEndTime({ hour: hour, minutes: minutes, amPm: amPm });
      params.onEndTimeSelect(hour + ':' + minutes + ' ' + amPm);
    } else {
      setUpdatedStartTime({ hour: hour, minutes: minutes, amPm: amPm });
      params.onStartTimeSelect(hour + ':' + minutes + ' ' + amPm);
    }
  };

  const onStartEndChanged = (type: number) => {
    setIsStartDateSelected(type == 1);
    setIsEndDateSelected(type == 2);
    if (type == 2) {
      params?.setEndTime(updatedEndTime);
    } else {
      params?.setStartTime(updatedStartTime);
    }
  };

  function Header() {
    return (
      <View style={styles.header}>
        <View style={styles.view} />
        <View
          style={{
            flex: 1,
            flexDirection: 'row',
            marginTop: 10,
            marginHorizontal: 4,
            alignItems: 'baseline',
            justifyContent: 'space-between',
          }}
        >
          <Text style={[Style.styleSheet.boldText]}>Date &amp; Time</Text>
          <TouchableOpacity onPress={onDoneSelect}>
            <Text
              style={[
                Style.styleSheet.headerTextStyle,
                {
                  color: Colors.PrimaryColor,
                  alignSelf: 'flex-end',
                },
              ]}
            >
              Done
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  return params.openBottomSheet == true || params.openBottomSheet == false ? (
    <Animated.View
      style={{
        flex: 1,
        backgroundColor: 'white',
        alignItems: 'stretch',
        height: height - 200,
        borderTopLeftRadius: 15,
        borderTopRightRadius: 15,
        elevation: 10,
        paddingVertical: 0.0,
        paddingHorizontal: 10.0,
        transform: [
          params.openBottomSheet == true
            ? {
                translateY: animatedValue.interpolate({
                  inputRange: [0, 1],
                  outputRange: [700, 0],
                }),
              }
            : params.openBottomSheet == false
            ? {
                translateY: animatedValue.interpolate({
                  inputRange: [0, 1],
                  outputRange: [0, 800],
                }),
              }
            : null,
        ],
      }}
    >
      <Header />

      <ScrollView>
        <CalendarWithTimer
          {...params}
          onStartEndChanged={onStartEndChanged}
          onStartDateSelect={(day: any) => {
            setStartDate(day);
            params.onStartDateSelect(day);
          }}
          onEndDateSelect={(day: any) => {
            setEndDate(day);
            params.onEndDateSelect(day);
          }}
        />
        {isStartDateSelected ? (
          <TimePicker
            key={`StartTime_${params?.startTime}`}
            dateForTime={startDate}
            timeSelectionType={Status.DEFAULT}
            startTime={params?.startTime}
            onTimeSelected={onTimeSelect}
          />
        ) : (
          <TimePicker
            key={`EndTime_${params?.endTime}`}
            dateForTime={startDate}
            timeSelectionType={Status.PREVIOUSDISABLED}
            startTime={params?.endTime}
            onTimeSelected={onTimeSelect}
          />
        )}
      </ScrollView>
    </Animated.View>
  ) : null;
};

const styles = StyleSheet.create({
  bottomSheetStyle: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'stretch',
    height: height - 200,
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15,
    elevation: 10,
    paddingVertical: 0.0,
    paddingHorizontal: 10.0,
  },

  container: {
    flex: 1,
    backgroundColor: Colors.Grey,
  },

  header: {
    height: 60,
  },

  view: {
    alignSelf: 'center',
    marginTop: 8,
    width: 45,
    height: 6,
    borderRadius: 5,
    backgroundColor: Colors.LightGrey,
  },
});

export default ModalBottomSheet;