import React, { useState } from "react";
import { Field } from "formik";
import styles from "./Style_SurveyCheckbox";
import { useMediaQuery, mobileQuery } from "../../helpers/mediaQuery";
import whiteCheck from '../../assets/icons/whiteCheck.svg';

const SurveyCheck = ({label, setAnswer, answer, name}) => {

  const [checked, setChecked] = useState(false);
  let btn_class = checked ? styles.surveyCheckbox : {...styles.surveyCheckbox, backgroundColor: "transparent"};
  let isMobile = useMediaQuery(mobileQuery);

  return (
    <label style={{...styles.checkLabel, ...isMobile && styles.mobCheckLabel }}>
      <span style={{ ...btn_class, ...styles.span }}>
        <img
        style={styles.img}
        src={whiteCheck} alt='whiteCheck'/>
        <Field
          style={styles.defaultCheck}
          type="checkbox"
          name={name}
          // value={value}
          onClick={() => {
            console.log("label:", label);
            setChecked(!checked);
            setAnswer((prevState)=>[...prevState, label])
            console.log("answers:", answer)
             if(answer.includes(label)) {
                  setAnswer(answer.filter(answer => answer !== label))
                }  else {
                    setAnswer([...answer, label])
                 }
          }}
        />
      </span>
      <div style={{
        ...styles.checkDiv,
        ...isMobile && styles.checkDivMobile
      }}
      >
        {label}
      </div>
    </label>
  );
};

export default SurveyCheck;