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 Logo from '../component/Logo';
import {
  container,
  pageTitleBox,
  pageTitle,
} from '../resoureces/styles/GlobalStyles';

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={container}>
        <ScrollView>
          <View>
            <View style={styles.direction}>
              <Checkbox
                disabled={false}
                value={allCheck}
                onValueChange={allBtnEvent}
                text={`네비게이션 이용, 개인정보 수집 및 이용, 위치기반서비스 이용약관에 모두 동의합니다`}
              />
            </View>
            <View style={[styles.border, styles.padding]}>
              <Text>이용약관 넣기</Text>
            </View>
          </View>
          <View>
            <View style={styles.direction}>
              <Checkbox
                disabled={false}
                value={naviCheck}
                onValueChange={naviBtnEvent}
                text={'네비게이션 이용 동의'}
              />
            </View>
            <View style={[styles.border, styles.padding]}>
              <Text>이용약관 넣기</Text>
            </View>
          </View>
          <View>
            <View style={styles.direction}>
              <Checkbox
                disabled={false}
                value={useCheck}
                onValueChange={useBtnEvent}
                text={'개인정보 수집 및 이용 동의'}
              />
            </View>
            <View style={[styles.border, styles.padding]}>
              <Text>이용약관 넣기</Text>
            </View>
          </View>
          <View>
            <View style={styles.direction}>
              <Checkbox
                disabled={false}
                value={infoCheck}
                onValueChange={infoBtnEvent}
                text={'위치정보 이용 약관 동의'}
              />
            </View>
            <View style={[styles.border, styles.padding]}>
              <Text>이용약관 넣기</Text>
            </View>
          </View>
          <View style={styles.direction}>
            <View style={[styles.buttonFlex, styles.margin]}>
              <Button
                title={'취소'}
                backgroundColor={'#bbbbbb'}
                padding={10}
                borderRadius={50}
                marginBottom={10}
                color={'#ffffff'}
                textAlign={'center'}
                onPress={()=>{navigation.navigate("Login")}}
              />
            </View>
            <View style={styles.buttonFlex}>
              <Button
                title={'확인'}
                backgroundColor={'#000000'}
                padding={10}
                borderRadius={50}
                marginBottom={10}
                color={'#ffffff'}
                textAlign={'center'}
                onPress={allCheckList}
              />
            </View>
          </View>
        </ScrollView>
      </View>
    </View>
  );
}

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