import React, {Component} from 'react';
import {View, Text, Image, TouchableOpacity, ToastAndroid} from 'react-native';
import Modal from 'react-native-modal';
import {Button} from 'native-base';
import Style from './styles';
import IMAGE from '../../config/image';
import ArrowNext from '../../Svg/ArrowNext';
import NoSoal from '../../components/NoSoal';
import NoQuestion from '../../components/NoQuestion';
import AlertFinish from '../../components/AlertFinish';
import axios from 'axios';
import RadioForm,{
  RadioButton,
  RadioButtonInput,
  RadioButtonLabel,
} from 'react-native-simple-radio-button';

const hobbies = [
  {
    label: 'Berenang',
    value: '0',
  },
  {
    label: 'Makan',
    value: '1',
  },
  {
    label: 'Dance',
    value: '2',
  },
];

export default class Soal extends Component {
  constructor() {
    super();
    this.state = {
      minutes: 50,
      alertFinish: false,
      tampil: false,
      seconds: 40,
    };
    this.tampilkanmodal = this.tampilkanmodal.bind(this);
    this.hilangkanModal = this.hilangkanModal.bind(this);
  }

  tampilkanmodal() {
    this.setState({
      tampil: true,
    });
  }

  hilangkanModal() {
    this.setState({
      tampil: false,
    });
  }

  componentDidMount() {
    this.myInterval = setInterval(() => {
      const {seconds, minutes} = this.state;
      if (seconds > 0) {
        this.setState(({seconds}) => ({
          seconds: seconds - 1,
        }));
      }
      if (seconds === 0) {
        if (minutes === 0) {
          clearInterval(this.myInterval);
        } else {
          this.setState(({minutes}) => ({
            minutes: minutes - 1,
            seconds: 59,
          }));
        }
      }
      if (seconds == 0 && minutes == 0) {
        this.setState({alertFinish: true});
      }
    }, 1000);
    axios
      .get('http://35.173.220.127:8080/api/quiz/all')
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        ToastAndroid.show('error', ToastAndroid.SHORT);
        console.log(err);
      });
  }
  render() {
    const {minutes, seconds} = this.state;
    return (
      <View style={Style.mainScreen}>
        <View style={Style.headerWrapper}>
          <Image style={Style.photo} source={IMAGE.photo} />
          <View style={Style.biodata}>
            <Text style={Style.name}>Fauzan Ardian</Text>
            <Text style={Style.nis}>3103117286</Text>
          </View>
          <View style={Style.countdown}>
            <Text style={Style.time}>{minutes}</Text>
            <Text style={Style.dots}>:</Text>
            <Text style={Style.time}>
              {seconds < 10 ? `0${seconds}` : seconds}
            </Text>
          </View>
        </View>
        <View style={Style.container}>
          <View>
            <View style={Style.soalWrapper}>
              <TouchableOpacity
                style={Style.soalBoxWrapper}
                onPress={this.tampilkanmodal}>
                <Text style={Style.soalBox}>Soal</Text>
              </TouchableOpacity>
            </View>
            <View style={Style.questionWrapper}>
              <Text style={Style.question}>
                1. Jika dalam asmara aku di tambah kamu menjadi?
              </Text>
            </View>
            {/* <View style={Style.choiceWrapper}>
              <RadioForm
                selectedButtonColor="#5D9CEC"
                radio_props={hobbies}
                initial={0}
                onPress={value => {
                  this.setState({value: value});
                }}
              />
            </View> */}
          </View>
          <View>
            <Modal
              animationIn={'zoomIn'}
              animationOut={'fadeOut'}
              isVisible={this.state.tampil}
              style={Style.modal}>
              <View style={Style.content}>
                <TouchableOpacity
                  style={Style.backWrapper}
                  onPress={this.hilangkanModal}>
                  <View style={Style.arrowNext}>
                    <ArrowNext />
                  </View>
                </TouchableOpacity>
                <View style={Style.detailSoal}>
                  <TouchableOpacity style={Style.noSoalWrapper}>
                    <NoSoal no="1" />
                  </TouchableOpacity>
                  <TouchableOpacity style={Style.noSoalWrapper}>
                    <NoSoal no="2" />
                  </TouchableOpacity>
                  <TouchableOpacity style={Style.noSoalWrapper}>
                    <NoSoal no="3" />
                  </TouchableOpacity>
                  <TouchableOpacity style={Style.noSoalWrapper}>
                    <NoSoal no="4" />
                  </TouchableOpacity>
                </View>
              </View>
            </Modal>
          </View>
          <View>
            <Modal
              animationIn={'zoomIn'}
              animationOut={'fadeOut'}
              isVisible={this.state.alertFinish}
              style={Style.modal}>
              <View>
                <View style={Style.alertFinishWrapper}>
                  <Image style={Style.tsLogo} source={IMAGE.tsLogo} />
                  <Text style={Style.teks}>
                    Maaf Waktu Mengerjakan Anda telah Habis
                  </Text>
                  <Text style={Style.desc}>
                    Silahkan tekan tombol keluar, untuk keluar
                  </Text>
                  <View>
                    <Button
                      onPress={() => this.props.navigation.navigate('Finish')}
                      style={Style.btn}>
                      <Text uppercase={false} style={Style.btnTeks}>
                        Keluar
                      </Text>
                    </Button>
                  </View>
                </View>
              </View>
            </Modal>
          </View>
        </View>
      </View>
    );
  }
}