import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, Image } from 'react-native';
import * as Colors from './utils/Colors';
import * as Style from './utils/Style';
import { Status } from './utils/Status';
import type TimerProps from './properties/TimerProps';

function TimePicker(
  props: TimerProps = {
    timeSelectionType: Status.DEFAULT,
    dateForTime: new Date().toLocaleDateString(),
    startTime: { hour: 0, minutes: 0, amPm: 'Am' },
    onTimeSelected: () => { },
  },
) {
  var currentTime = new Date();
  // var currentTime = new Date(props.dateForTime);
  var currentHour =
    currentTime.getHours() > 12
      ? currentTime.getHours() - 12
      : currentTime.getHours();
  var currentMin = currentTime.getMinutes();

  const [hour, setHour] = useState(props.startTime.hour);
  const [minutes, setMinutes] = useState(props.startTime.minutes);
  const [amPmValue, setAmPmValue] = useState<string>(props.startTime.amPm);

  const [hideAmPm, setHideAmPm] = useState(false);

  const [prevHour, _setPrevHour] = useState<number>(props.startTime.hour);
  const [prevMins, _setPrevMins] = useState<number>(props.startTime.minutes);

  const [hideFutHour, setHideFutHour] = useState(false);
  const [hidePrevHour, setHidePrevHour] = useState(false);
  const [hideFutMins, setHideFutMins] = useState(false);
  const [hidePrevMins, setHidePrevMins] = useState(false);

  useEffect(() => {
    if (props.timeSelectionType == Status.FUTUREDISABLED) {
      if (hour == currentHour) {
        if (minutes == currentMin) {
          hideFutureView();
        } else {
          setHideAmPm(false);
          setHideFutHour(true);
          setHideFutMins(false);
          setHidePrevHour(false);
          setHidePrevMins(false);
        }
      } else {
        showView();
      }
    } else if (props.timeSelectionType == Status.PREVIOUSDISABLED) {
      if (hour == prevHour) {
        if (minutes == prevMins) {
          hidePreviousView();
        } else {
          setHideAmPm(false);
          setHidePrevHour(true);
          setHidePrevMins(false);
          setHideFutHour(false);
          setHideFutMins(false);
        }
      } else {
        showView();
      }
    } else {
      showView();
    }
  }, [props.timeSelectionType, hour, minutes]);

  function showView() {
    setHideAmPm(false);
    setHideFutHour(false);
    setHideFutMins(false);
    setHidePrevHour(false);
    setHidePrevMins(false);
  }

  function hidePreviousView() {
    setHideAmPm(true);
    setHidePrevHour(true);
    setHidePrevMins(true);
  }

  function hideFutureView() {
    setHideAmPm(true);
    setHideFutHour(true);
    setHideFutMins(true);
  }

  function incrementHours() {
    let currentHour = 0;
    if (hour < 11) currentHour = hour + 1;
    else currentHour = 0;
    setHour(currentHour);
    props.startTime.hour = currentHour;
    props.onTimeSelected(currentHour, minutes, amPmValue);
  }

  function decrementHours() {
    let currentHour = 0;
    if (hour > 0) currentHour = hour - 1;
    else currentHour = 11;
    setHour(currentHour);
    props.startTime.hour = currentHour;
    props.onTimeSelected(currentHour, minutes, amPmValue);
  }

  function formatHours() {
    var showHour;
    if (hour == 0) {
      showHour = 12;
    } else if (hour <= 9) {
      showHour = '0' + hour;
    } else {
      showHour = hour;
    }
    return showHour + 'h';
  }

  function incrementMins() {
    let currentMinutes = 0;
    if (minutes < 59) currentMinutes = minutes + 1;
    // else currentMinutes = minutes;
    else currentMinutes = 0;
    setMinutes(currentMinutes);
    props.startTime.minutes = currentMinutes;
    props.onTimeSelected(hour, currentMinutes, amPmValue);
  }

  function decrementMins() {
    let currentMinutes = 0;
    if (minutes > 0) currentMinutes = minutes - 1;
    // else currentMinutes = minutes;
    else currentMinutes = 59;
    setMinutes(currentMinutes);
    props.startTime.minutes = currentMinutes;
    props.onTimeSelected(hour, currentMinutes, amPmValue);
  }

  function formatMinutes() {
    var showMins;
    if (minutes <= 9) {
      showMins = '0' + minutes;
    } else {
      showMins = minutes;
    }
    return showMins + 'm';
  }

  function getAMTextColor() {
    return amPmValue == 'AM' ? Colors.PrimaryColor : Colors.Grey;
  }

  function getPMTextColor() {
    return amPmValue == 'PM' ? Colors.PrimaryColor : Colors.Grey;
  }

  function HoursView() {
    return (
      <View
        style={{
          flexDirection: 'column',
          paddingHorizontal: 12,
          paddingVertical: 8,
          backgroundColor: Colors.grey,
          borderRadius: 5,
          alignItems: 'center',
          justifyContent: 'center',
          flex: 1,
        }}>
        {hideFutHour ? (
          <View style={{ paddingHorizontal: 20, paddingVertical: 5 }}>
            <Image
              style={{
                width: 15,
                height: 15,
                alignSelf: 'center',
                tintColor: Colors.LightGrey,
              }}
              source={require('./images/up_arrow.png')}
              resizeMode="contain"
            />
          </View>
        ) : (
          <TouchableOpacity
            style={{ paddingHorizontal: 20, paddingVertical: 5 }}
            onPress={() => incrementHours()}>
            <Image
              style={{
                width: 15,
                height: 15,
                alignSelf: 'center',
                tintColor: Colors.Grey,
              }}
              source={require('./images/up_arrow.png')}
              resizeMode="contain"
            />
          </TouchableOpacity>
        )}

        <Text
          style={[
            Style.styleSheet.boldText,
            { paddingHorizontal: 20, paddingVertical: 5, fontSize: 26 },
          ]}>
          {formatHours()}
        </Text>

        {hidePrevHour ? (
          <View style={{ paddingHorizontal: 20, paddingVertical: 5 }}>
            <Image
              style={{
                width: 15,
                height: 15,
                alignSelf: 'center',
                tintColor: Colors.LightGrey,
              }}
              source={require('./images/down_arrow.png')}
              resizeMode="contain"
            />
          </View>
        ) : (
          <TouchableOpacity
            style={{ paddingHorizontal: 20, paddingVertical: 5 }}
            onPress={() => decrementHours()}>
            <Image
              style={{
                width: 15,
                height: 15,
                alignSelf: 'center',
                tintColor: Colors.Grey,
              }}
              source={require('./images/down_arrow.png')}
              resizeMode="contain"
            />
          </TouchableOpacity>
        )}
      </View>
    );
  }

  function minutesView() {
    return (
      <View
        style={{
          flexDirection: 'column',
          paddingHorizontal: 12,
          paddingVertical: 8,
          backgroundColor: Colors.grey,
          borderRadius: 5,
          alignItems: 'center',
          justifyContent: 'center',
          flex: 1,
        }}>
        {hideFutMins ? (
          <View style={{ paddingHorizontal: 20, paddingVertical: 5 }}>
            <Image
              style={{
                width: 15,
                height: 15,
                alignSelf: 'center',
                tintColor: Colors.LightGrey,
              }}
              source={require('./images/up_arrow.png')}
              resizeMode="contain"
            />
          </View>
        ) : (
          <TouchableOpacity
            style={{ paddingHorizontal: 20, paddingVertical: 5 }}
            onPress={() => {
              incrementMins();
            }}>
            <Image
              style={{
                width: 15,
                height: 15,
                alignSelf: 'center',
                tintColor: Colors.Grey,
              }}
              source={require('./images/up_arrow.png')}
              resizeMode="contain"
            />
          </TouchableOpacity>
        )}

        <Text
          style={[
            Style.styleSheet.boldText,
            { paddingHorizontal: 20, paddingVertical: 5, fontSize: 26 },
          ]}>
          {formatMinutes()}
        </Text>

        {hidePrevMins ? (
          <View style={{ paddingHorizontal: 20, paddingVertical: 5 }}>
            <Image
              style={{
                width: 15,
                height: 15,
                alignSelf: 'center',
                tintColor: Colors.LightGrey,
              }}
              source={require('./images/up_arrow.png')}
              resizeMode="contain"
            />
          </View>
        ) : (
          <TouchableOpacity
            style={{ paddingHorizontal: 20, paddingVertical: 5 }}
            onPress={() => decrementMins()}>
            <Image
              style={{
                width: 15,
                height: 15,
                alignSelf: 'center',
                tintColor: Colors.Grey,
              }}
              source={require('./images/down_arrow.png')}
              resizeMode="contain"
            />
          </TouchableOpacity>
        )}
      </View>
    );
  }

  const ColonView = () => {
    return (
      <View
        style={{
          justifyContent: 'center',
          alignSelf: 'center',
          flex: 0.2,
          width: '100%',
          marginStart: 12.0,
        }}>
        <View
          style={{
            backgroundColor: 'black',
            width: 8.0,
            height: 8.0,
            borderRadius: 30.0,
          }}
        />
        <View
          style={{
            backgroundColor: 'black',
            width: 8.0,
            height: 8.0,
            borderRadius: 30.0,
            marginTop: 10.0,
          }}
        />
      </View>
    );
  };

  return (
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'space-between',
      }}>
      {HoursView()}

      <ColonView />

      {minutesView()}
      <View style={{ flex: 0.2, height: 8.0 }} />
      <View
        style={{
          flexDirection: 'column',
          paddingHorizontal: 6,
          paddingVertical: 8,
          backgroundColor: Colors.grey,
          borderRadius: 5,
          alignItems: 'center',
          justifyContent: 'center',
          flex: 0.7,
        }}>
        {hideAmPm ? (
          <View
            style={{
              paddingHorizontal: 10,
              paddingVertical: 5,
              alignSelf: 'center',
              flex: 1,
            }}>
            <Text
              style={[
                Style.styleSheet.headerTextStyle,
                {
                  color: getAMTextColor(),
                },
              ]}>
              AM
            </Text>
          </View>
        ) : (
          <TouchableOpacity
            onPress={() => {
              setAmPmValue('AM');
              props.onTimeSelected(hour, minutes, 'AM');
            }}
            style={{
              paddingHorizontal: 10,
              paddingVertical: 5,
              alignSelf: 'center',
              flex: 1,
            }}>
            <Text
              style={[
                Style.styleSheet.headerTextStyle,
                {
                  color: getAMTextColor(),
                },
              ]}>
              AM
            </Text>
          </TouchableOpacity>
        )}

        <View style={{ flex: 1 }}>
          <View
            style={{
              backgroundColor: Colors.Grey,
              width: 15,
              height: 1,
            }}
          />
        </View>
        {hideAmPm ? (
          <View
            style={{
              paddingHorizontal: 10,
              paddingVertical: 5,
              alignSelf: 'center',
              flex: 1,
            }}>
            <Text
              style={[
                Style.styleSheet.headerTextStyle,
                {
                  color: getPMTextColor(),
                },
              ]}>
              PM
            </Text>
          </View>
        ) : (
          <TouchableOpacity
            onPress={() => {
              setAmPmValue('PM');
              props.onTimeSelected(hour, minutes, 'PM');
            }}
            style={{
              paddingHorizontal: 10,
              paddingVertical: 5,
              alignSelf: 'center',
              flex: 1,
            }}>
            <Text
              style={[
                Style.styleSheet.headerTextStyle,
                {
                  color: getPMTextColor(),
                },
              ]}>
              PM
            </Text>
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
}

export default TimePicker;