// DEPENDENCIES
import { React, useState } from 'react';
import { Formik, Form, Field } from 'formik';
// COMPONENTS
import PageOuterWrapper from '../../components/page-outer-wrapper/PageOuterWrapper';
import Header from '../../components/header-component/Header';
import CustomCheck from './CustomCheckbox';
//  STYLES
import "../../styles/hideAdSpace.css";
import styles from './Style_SurveyPage';
// HELPERS
import { useMediaQuery, mobileQuery } from "../../helpers/mediaQuery";

const SurveyPage = () => {
  let isMobile = useMediaQuery(mobileQuery);

  const[answer, setAnswer] = useState();
  const submitHandler = () => console.log(answer);
  const labels = ['Answer number 1',
                  'Answer number 2',
                  'Answer number 3',
                  'Answer number 4',
                  'Answer number 5'];

  return (
    <PageOuterWrapper>
      <div style={isMobile ? styles.givingFeedbackMob : styles.givingFeedback} >
        <Header />
        <h3 style={isMobile ? styles.h3Mobile : styles.h3}>
          Feedback.exchange/SURVEY
        </h3>
        <Formik initialValues={{
            survey: [],
        }}
        onSubmit={(formikProps) => {
            console.log("Formik Props: ", formikProps)
        }}
        >
        {(formikProps) => (
          <Form
            style={{
              ...isMobile && styles.mobileForm
            }}
            onSubmit={submitHandler}
          >
            <div
              style={{
                ...styles.wrapper,
                ...isMobile && styles.mobWrapper
              }}
            >
              <label style={isMobile ? styles.labelMobile : styles.label}>
                1. Question
              </label>
              {labels.map((label, index) => {
                return  <CustomCheck
                        key={index}
                        setAnswer={setAnswer}
                        label={label}
                        answer={answer}
                        name="survey"
                        />
              })}
            </div>
            <div
              style={{
                ...styles.wrapper, paddingBottom: "4.5%",
                ...isMobile && styles.mobWrapper, paddingBottom: "3.75%",
              }}
            >
              <label
                style={{
                  ...styles.label, padding: "4.53% 0% 2% 5.5%",
                  ...isMobile && styles.labelMobile, padding: "3.9% 0% 1.5% 4.9%",
                }} >
                2. Question
              </label>
              <Field
                style={{
                  ...styles.textArea,
                  ...isMobile && styles.textAreaMobile
                }}
                as="textarea"
                name="textarea"
                placeholder="Write your answer here"
              />
            </div>
            <div style={styles.btnDiv}>
            <button
            style={styles.btn}
            type="submit">
                SUBMIT
                </button>
            </div>
          </Form>
          )}
        </Formik>
      </div>
    </PageOuterWrapper>
  )
}
export default SurveyPage;