kerjakansoal.js

/* eslint-disable no-alert */
/* eslint-disable react-native/no-inline-styles */
import React, {useState} from 'react';
import {RFValue} from 'react-native-responsive-fontsize';
import {useSelector} from 'react-redux';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import {fonts, colors} from '../../utils';
import {Gap, Button, StatusBar, Timer, Column} from '../../components';
import Card from '../../components/atom/Card';

const ContentSoal = ({navigation}) => {
  const stateGlobal = useSelector(state => state);

  const [count, setCount] = useState(0);
  const [no, setNo] = useState(stateGlobal.exams[count].id);
  const [title, setTitle] = useState(stateGlobal.exams[count].title);
  const [content, setContent] = useState(stateGlobal.exams[count].content);
  const [pageNumber, setPageNumber] = useState(0);

  const back = () => {
    if (count <= 0) {
      setNo(stateGlobal.exams[0].id);
      setCount(0);
      setContent(stateGlobal.exams[0].content);
    } else if (stateGlobal.exams.length >= count) {
      setNo(stateGlobal.exams[count].id);
      setCount(count - 1);
      setContent(stateGlobal.exams[count].content);
      console.log(count);
    }
  };
  const next = () => {
    if (count < stateGlobal.exams.length - 1) {
      setCount(count + 1);
      setNo(stateGlobal.exams[count].id);
      setTitle(stateGlobal.exams[count].title);
      setContent(stateGlobal.exams[count].content);
    } else if (count === stateGlobal.exams.length - 1) {
      // eslint-disable-next-line no-alert
      alert('Kerjakan Soal Selesai');
      navigation.replace('ConfirmExam');
    }
  };
  return (
    <ScrollView showsVerticalScrollIndicator={false}>
      <RenderStatusBar />
      <View style={styles.page}>
        <View style={styles.container}>
          <ScrollView showsVerticalScrollIndicator={false}>
            <RenderHeader no={no} />
            <RenderContent
              title={title}
              content={content}
              no={no}
              // kunci={kunci}
            />
            <RenderButton back={back} next={next} />
          </ScrollView>
        </View>
        <RenderPagination />
      </View>
    </ScrollView>
  );
};

const RenderStatusBar = () => {
  return (
    <StatusBar type="secondary" background={colors.background.quarterly} />
  );
};

const RenderHeader = ({no}) => {
  return (
    <View style={styles.header}>
      <View style={{flexDirection: 'row', alignItems: 'center'}}>
        <Text style={styles.titleSoal}>SOAL NO</Text>
        <View style={styles.wrapperNumber}>
          <Text style={styles.title}>{no}</Text>
        </View>
      </View>
      <Timer />
    </View>
  );
};

const RenderContent = ({title, content, no}) => {
  return (
    <View>
      <View>
        <Card title={title} desc={content[0]} />
        <View style={styles.choice}>
          <Card type="pilihanGanda" desc={content[1]} />
          <Gap width={20} />
          <Card type="pilihanGanda" desc={content[2]} />
        </View>

        <View style={styles.choice}>
          <Card type="pilihanGanda" desc={content[3]} />
          <Gap width={20} />
          <Card type="pilihanGanda" desc={content[4]} />
        </View>
      </View>
      <RenderFooter no={no} />
    </View>
  );
};

const RenderFooter = ({no}) => {
  return (
    <View style={{marginTop: 20}}>
      <View style={{flexDirection: 'row', alignItems: 'center'}}>
        <Column title="Status" />
        <Column type="secondary" title="Belum dijawab" />
      </View>
      <View
        style={{
          flexDirection: 'row',
          marginTop: 20,
          alignItems: 'center',
          justifyContent: 'space-between',
          width: 190,
        }}>
        <Text style={styles.title}>DIKERJAKAN</Text>
        <Column type="tertiary" title={`0${no}`} />
      </View>
      <View
        style={{
          flexDirection: 'row',
          marginTop: 5,
          alignItems: 'center',
          justifyContent: 'space-between',
          width: 190,
        }}>
        <Text style={styles.title}>BELUM DIKERJAKAN</Text>
        <Column type="tertiary" title="00" />
      </View>
    </View>
  );
};

const RenderPagination = () => {
  const stateGlobal = useSelector(state => state);
  return (
    <View style={styles.pagination}>
      <View style={styles.containerPagination}>
        <Text style={styles.title}>Soal</Text>
        {stateGlobal.exams.map(item => {
          return (
            <TouchableOpacity style={styles.wrapperSoalActive} key={item.id}>
              <Text style={styles.title} key={item.id}>
                {item.id}
              </Text>
            </TouchableOpacity>
          );
        })}
        <TouchableOpacity style={styles.wrapperIcon}>
          <MaterialCommunityIcons
            name="chevron-down-circle-outline"
            size={26}
            color={colors.background.secondary}
          />
        </TouchableOpacity>
      </View>
    </View>
  );
};

const RenderButton = ({count, back, next}) => {
  return (
    <View style={styles.button}>
      <Text>{count}</Text>
      <Button type="miniButtonInactive" title="BACK" onPress={back} />
      <Gap width={20} />
      <Button type="miniButtonActive" title="NEXT" onPress={next} />
    </View>
  );
};

export default ContentSoal;

const styles = StyleSheet.create({
  page: {
    backgroundColor: '#FF9233',
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  container: {
    paddingVertical: 20,
    paddingHorizontal: 20,
    backgroundColor: '#FF9233',
    justifyContent: 'flex-start',
    width: '90%',
  },
  titleSoal: {
    fontSize: RFValue(15, 580),
    fontFamily: fonts.primary[800],
    color: colors.text.secondary,
    textAlign: 'center',
  },
  title: {
    fontSize: RFValue(12, 580),
    fontFamily: fonts.primary[800],
    color: colors.text.secondary,
    textAlign: 'center',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    // justifyContent: 'space-between',
  },
  choice: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  wrapperNumber: {
    backgroundColor: colors.background.secondary,
    marginLeft: 10,
    paddingHorizontal: 10,
    paddingVertical: 5,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 5,
  },
  pagination: {
    paddingVertical: 20,
  },
  containerPagination: {
    backgroundColor: colors.background.tertiary,
    padding: 7,
    alignItems: 'center',
    borderRadius: 5,
    marginLeft: 'auto',
  },
  wrapperSoalActive: {
    backgroundColor: colors.background.secondary,
    height: 25,
    width: 25,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 10,
    borderRadius: 5,
  },
  wrapperSoalInactive: {
    backgroundColor: colors.background.primary,
    height: 25,
    width: 25,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 10,
    borderRadius: 5,
  },
  titleInactive: {
    fontSize: 12,
    fontFamily: fonts.primary[800],
    color: colors.text.primary,
    textAlign: 'center',
  },
  wrapperIcon: {
    backgroundColor: 'transparent',
    height: 25,
    width: 25,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 10,
    borderRadius: 5,
  },
  button: {
    paddingTop: 20,
    flexDirection: 'row',
  },
});