import React, {useState, useEffect} from 'react';
import {View, StyleSheet, ScrollView, Text, Alert} from 'react-native';
import Button from '../component/Button';
import Checkbox from '../component/Checkbox';
import {
  container,
  pageTitleBox,
  pageTitle,
} from '../resoureces/styles/GlobalStyles';
import {PERSONAL_INFORMATION, LOCATION, NAVIGATION} from '../../Global';
import {ScrollView as GestureHandlerScrollView} from 'react-native-gesture-handler';
import {PRIMARY, WHITE} from '../color';

export default function Agreement({navigation}) {
  const [allCheck, setAllCheck] = useState(false);
  const [naviCheck, setNaviCheck] = useState(false);
  const [useCheck, setUseCheck] = useState(false);
  const [infoCheck, setInfoCheck] = useState(false);

  const allBtnEvent = () => {
    if (allCheck === false) {
      setAllCheck(true);
      setNaviCheck(true);
      setUseCheck(true);
      setInfoCheck(true);
    } else {
      setAllCheck(false);
      setNaviCheck(false);
      setUseCheck(false);
      setInfoCheck(false);
    }
  };

  const naviBtnEvent = () => {
    if (naviCheck === false) {
      setNaviCheck(true);
    } else {
      setNaviCheck(false);
    }
  };

  const useBtnEvent = () => {
    if (useCheck === false) {
      setUseCheck(true);
    } else {
      setUseCheck(false);
    }
  };

  const infoBtnEvent = () => {
    if (infoCheck === false) {
      setInfoCheck(true);
    } else {
      setInfoCheck(false);
    }
  };

  const allCheckList = () => {
    if (allCheck) {
      navigation.navigate('JoinMembers');
    } else {
      Alert.alert(
        '약관에 동의해주세요.',
        `네비게이션 이용약관, 개인정보 수집 및 이용동의, 위치정보 이용약관에 모두 동의해주세요`,
      );
    }
  };

  useEffect(() => {
    if (naviCheck === true && useCheck === true && infoCheck === true) {
      setAllCheck(true);
    } else {
      setAllCheck(false);
    }
  }, [naviCheck, useCheck, infoCheck]);

  return (
    <View style={{flex: 1}}>
      <View style={pageTitleBox}>
        <Text style={pageTitle}>이용 약관</Text>
      </View>
      <View style={styles.container}>
        <ScrollView>
          <View>
            <View style={styles.direction}>
              <Checkbox
                disabled={false}
                value={allCheck}
                onValueChange={allBtnEvent}
                text={`네비게이션 이용, 개인정보 수집 및 이용, 위치기반서비스 이용약관에 모두 동의합니다`}
              />
            </View>
          </View>
          <View>
            <View style={styles.direction}>
              <Checkbox
                disabled={false}
                value={naviCheck}
                onValueChange={naviBtnEvent}
                text={'네비게이션 이용 동의'}
              />
            </View>
            <GestureHandlerScrollView style={[styles.border, styles.padding]}>
              <Text>{NAVIGATION}</Text>
            </GestureHandlerScrollView>
          </View>
          <View>
            <View style={styles.direction}>
              <Checkbox
                disabled={false}
                value={useCheck}
                onValueChange={useBtnEvent}
                text={'개인정보 수집 및 이용 동의'}
              />
            </View>
            <GestureHandlerScrollView style={[styles.border, styles.padding]}>
              <Text>{PERSONAL_INFORMATION}</Text>
            </GestureHandlerScrollView>
          </View>
          <View>
            <View style={styles.direction}>
              <Checkbox
                disabled={false}
                value={infoCheck}
                onValueChange={infoBtnEvent}
                text={'위치정보 이용 약관 동의'}
              />
            </View>
            <GestureHandlerScrollView style={[styles.border, styles.padding]}>
              <Text>{LOCATION}</Text>
            </GestureHandlerScrollView>
          </View>
          <View style={styles.direction}>
            <View style={[styles.buttonFlex, styles.margin]}>
              <Button
                title={'취소'}
                backgroundColor={'#bbbbbb'}
                padding={10}
                borderRadius={50}
                color={'#ffffff'}
                textAlign={'center'}
                onPress={() => {
                  navigation.navigate('Login');
                }}
              />
            </View>
            <View style={[styles.buttonFlex]}>
              <Button
                title={'확인'}
                backgroundColor={PRIMARY.DEFAULT}
                padding={10}
                borderRadius={50}
                color={WHITE}
                textAlign={'center'}
                onPress={allCheckList}
              />
            </View>
          </View>
        </ScrollView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: WHITE,
    padding: 20,
  },
  padding: {
    padding: 20,
    height: 200,
  },
  direction: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  border: {
    borderWidth: 1,
    borderRadius: 5,
    borderColor: '#dddddd',
    marginBottom: 10,
  },
  buttonFlex: {
    flex: 1,
    marginVertical: 10,
  },
  margin: {
    marginRight: 10,
  },
});