import React, {useState} from 'react';
import {
  View,
  Text,
  ScrollView,
  Switch,
  TouchableOpacity,
  TextInput,
  Image,
  Platform,
} from 'react-native';
import {Container, Header, ModalSetHours, Button, Icon} from 'components';
import {Colors} from 'global-styles';
import {useTranslation} from 'react-i18next';
import styles from './styles';
import moment from 'moment';

const DAYS = [
  {
    name: 'Senin',
    time: '06:00 - 12:00',
    closed: false,
    icon: require('assets/images/days/senin.png'),
  },
  {
    name: 'Selasa',
    time: '06:00 - 12:00',
    closed: false,
    icon: require('assets/images/days/selasa.png'),
  },
  {
    name: 'Rabu',
    time: '06:00 - 12:00',
    closed: false,
    icon: require('assets/images/days/rabu.png'),
  },
  {
    name: 'Kamis',
    time: '00:00',
    closed: true,
    icon: require('assets/images/days/kamis.png'),
  },
  {
    name: 'Jumat',
    time: '00:00',
    closed: true,
    icon: require('assets/images/days/jumat.png'),
  },
  {
    name: 'Sabtu',
    time: '06:00 - 12:00',
    closed: false,
    icon: require('assets/images/days/sabtu.png'),
  },
  {
    name: 'Minggu',
    time: '06:00 - 12:00',
    closed: true,
    icon: require('assets/images/days/minggu.png'),
  },
];

const RenderInputHours = ({label, editable}) => {
  const [value, setValue] = useState('');
  const handleFormatInput = val => {
    const formattedValue = formatInput(val);
    if (formattedValue.length < 6) {
      setValue(formattedValue);
    }
  };

  const formatInput = input => {
    if (input.length === 2) {
      if (input > 24) {
        return '';
      }
    }
    if (input.length === 5) {
      let inputX = input.split(':');
      if (inputX[1] > 60) {
        return inputX[0];
      }
    }
    if (input.length > 2 && input[2] !== ':') {
      return input.substring(0, 2) + ':' + input.slice(2);
    }
    return input;
  };

  return (
    <View style={styles.inputHours}>
      <Text style={styles.inputHourLabel}>{label}</Text>
      <TextInput
        placeholder="00:00"
        value={editable ? value : ''}
        maxLength={5}
        editable={editable}
        onChangeText={val => handleFormatInput(val)}
        keyboardType="decimal-pad"
        style={styles.inputHourItem}
      />
    </View>
  );
};

const OperationalTime = ({navigation}) => {
  const {t} = useTranslation();
  const [checked, setChecked] = useState(false);
  const [isEnabled, setIsEnabled] = useState(false);
  const [modal, setModal] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
  console.log(moment('01-06-2018', 'MM-DD-YYYY').locale('en').format('dddd'));
  return (
    <Container backgroundColor={Colors.WHITE}>
      <Header navigation={navigation} smTitle={t('operational_time_title')} />
      <View style={styles.container}>
        <ScrollView contentContainerStyle={styles.scrollview}>
          <View style={styles.spacing} />
          <View style={styles.is24HoursSection}>
            <TouchableOpacity
              onPress={() => {
                setChecked(!checked);
                setIsEnabled(false);
              }}
              activeOpacity={0.5}
              style={styles.checkboxSection}>
              <View style={styles.checkbox(checked)}>
                <Icon name="check" type="Feather" style={styles.checkboxIcon} />
              </View>
              <Text style={styles.checkboxLabel}>
                {t('operational_hours_same_every_day_text')}
              </Text>
            </TouchableOpacity>
            <View style={styles.is24Hours}>
              <Text style={styles.is24HoursLabel}>{t('_24_hours_text')}</Text>
              <Switch
                trackColor={{false: Colors.GREY, true: '#4ed164'}}
                thumbColor={isEnabled ? Colors.WHITE : '#f4f3f4'}
                ios_backgroundColor={Colors.GREY}
                onValueChange={toggleSwitch}
                disabled={!checked}
                value={isEnabled}
                style={
                  Platform.OS === 'ios' && {
                    transform: [{scaleX: 0.8}, {scaleY: 0.8}],
                  }
                }
              />
            </View>
            <View style={styles.inputHourSection}>
              <RenderInputHours
                label={t('open_text')}
                editable={isEnabled ? false : checked ? true : false}
              />
              <View style={styles.spacingVertical} />
              <RenderInputHours
                label={t('closed_text')}
                editable={isEnabled ? false : checked ? true : false}
              />
            </View>
          </View>
          {DAYS.map((item, index) => (
            <View key={index} style={styles.dayItemSection(checked)}>
              <Image source={item.icon} style={styles.dayItemImage} />
              <View style={styles.dayItemInfoSection}>
                <View style={styles.dayItemInfo}>
                  <Text style={styles.dayItemInfoTitle}>{item.name}</Text>
                  <Text style={styles.dayItemInfoSubTitlte(item.closed)}>
                    {item.closed ? t('closed_text') : item.time}
                  </Text>
                </View>
                <TouchableOpacity
                  disabled={checked}
                  onPress={() => setModal(true)}>
                  <Text style={styles.dayItemInfoChangeButtonTitle}>
                    {t('change_text')}
                  </Text>
                </TouchableOpacity>
              </View>
            </View>
          ))}
        </ScrollView>
        <View style={styles.buttonSection}>
          <Button title={t('save')} onPress={() => navigation.goBack()} />
        </View>
        <ModalSetHours isVisible={modal} onClose={() => setModal(false)} />
      </View>
    </Container>
  );
};

export default OperationalTime;
