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

const CustomCheck = ({label, setAnswer, answer}) => {

  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=''/>
        <Field
          style={styles.defaultCheck}
          type="checkbox"
          name="survey"
        //value={value}
          onClick={() => {
            console.log("label:", label);
            setChecked(!checked);
            setAnswer((prevState)=>[...prevState, label])
            console.log("answers:", answer)

            //   if(answer.contains(label) {
            //      remove item from array

            // })
          }}
        />
      </span>
      <div style={{
        ...styles.checkDiv,
        ...isMobile && styles.checkDivMobile
      }}
      >
        {label}
      </div>
    </label>
  );
};

export default CustomCheck;