{"version":3,"file":"checkbox-field-5f4a4830.js","sources":["../../../../src/scripts/react-components/quiz-form/checkbox-field.tsx"],"sourcesContent":["import React, { useEffect, useId, useState } from 'react';\n\ntype CheckboxFieldProps = {\n  fieldName: string;\n  values?: {\n    label: string;\n    value: string | number;\n    image?: string;\n    imageAlt?: string;\n    isImage?: boolean;\n  }[];\n  setDisabled: (disabled: boolean) => void;\n};\n\nexport const SKIP_VALUE = 'skip';\n\nexport const CheckboxField = ({\n  fieldName,\n  values,\n  setDisabled\n}: CheckboxFieldProps) => {\n  const id = useId();\n  const [selectedValues, setSelectedValues] = useState<string[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  const handleInputChage = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    let values = [...selectedValues];\n    const index = values.indexOf(value);\n    if (index > -1) {\n      values.splice(index, 1);\n    } else {\n      if (value === SKIP_VALUE) {\n        values = [value];\n\n        const inputs = containerRef.current?.querySelectorAll(\n          'input[type=\"checkbox\"]'\n        ) as NodeListOf<HTMLInputElement>;\n\n        inputs.forEach(input => {\n          if (input.value !== SKIP_VALUE) {\n            input.checked = false;\n          }\n        });\n      } else {\n        values.push(value);\n        values = values.filter(value => value !== SKIP_VALUE);\n\n        const skipInput = containerRef.current?.querySelector(\n          `input[value=\"${SKIP_VALUE}\"]`\n        ) as HTMLInputElement;\n\n        if (skipInput) {\n          skipInput.checked = false;\n        }\n      }\n    }\n\n    setSelectedValues([...values]);\n\n    if (values.length > 0) {\n      setDisabled(false);\n    } else {\n      setDisabled(true);\n    }\n  };\n\n  useEffect(() => {\n    if (containerRef.current && values) {\n      containerRef.current.style.setProperty(\n        '--columns',\n        `${values.length > 4 ? 4 : values.length}`\n      );\n    }\n  }, [values]);\n\n  return (\n    <div className=\"radio-field\" ref={containerRef}>\n      {values?.map((value, index) => (\n        <div\n          key={index}\n          className={`radio-field__card ${\n            selectedValues.indexOf(value.value.toString()) > -1\n              ? 'radio-field__card--active'\n              : ''\n          }`}\n        >\n          {value.image && (\n            <picture\n              className={`radio-field__picture ${\n                value.isImage ? 'radio-field__picture--image' : ''\n              }`}\n            >\n              <img src={value.image} alt={value.imageAlt} width=\"80\" height=\"80\" />\n            </picture>\n          )}\n          <label className=\"radio-field__label\" htmlFor={`${id}-${index}`}>\n            {value.label}\n          </label>\n          <input\n            className=\"field__checkbox-input radio-field__input\"\n            type=\"checkbox\"\n            name={fieldName}\n            id={`${id}-${index}`}\n            value={value.value}\n            onChange={handleInputChage}\n          />\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default CheckboxField;\n"],"names":["SKIP_VALUE","CheckboxField","fieldName","values","setDisabled","id","useId","selectedValues","setSelectedValues","useState","containerRef","React","handleInputChage","event","value","index","_a","input","skipInput","_b","useEffect"],"mappings":"gDAcO,MAAMA,EAAa,OAEbC,EAAgB,CAAC,CAC5B,UAAAC,EACA,OAAAC,EACA,YAAAC,CACF,IAA0B,CACxB,MAAMC,EAAKC,EAAAA,QACL,CAACC,EAAgBC,CAAiB,EAAIC,EAAA,SAAmB,CAAE,CAAA,EAC3DC,EAAeC,EAAM,OAAuB,IAAI,EAEhDC,EAAoBC,GAA+C,SACjE,MAAAC,EAAQD,EAAM,OAAO,MACvBV,IAAAA,EAAS,CAAC,GAAGI,CAAc,EACzB,MAAAQ,EAAQZ,EAAO,QAAQW,CAAK,EAClC,GAAIC,EAAQ,GACVZ,EAAO,OAAOY,EAAO,CAAC,UAElBD,IAAUd,EACZG,EAAS,CAACW,CAAK,IAEAE,EAAAN,EAAa,UAAb,YAAAM,EAAsB,iBACnC,2BAGK,QAAiBC,GAAA,CAClBA,EAAM,QAAUjB,IAClBiB,EAAM,QAAU,GAClB,CACD,MACI,CACLd,EAAO,KAAKW,CAAK,EACjBX,EAASA,EAAO,OAAOW,GAASA,IAAUd,CAAU,EAE9C,MAAAkB,GAAYC,EAAAT,EAAa,UAAb,YAAAS,EAAsB,cACtC,gBAAgBnB,OAGdkB,IACFA,EAAU,QAAU,IAKRV,EAAA,CAAC,GAAGL,CAAM,CAAC,EAEzBA,EAAO,OAAS,EAClBC,EAAY,EAAK,EAEjBA,EAAY,EAAI,CAClB,EAGFgB,OAAAA,EAAAA,UAAU,IAAM,CACVV,EAAa,SAAWP,GAC1BO,EAAa,QAAQ,MAAM,YACzB,YACA,GAAGP,EAAO,OAAS,EAAI,EAAIA,EAAO,QAAA,CAEtC,EACC,CAACA,CAAM,CAAC,EAGTQ,EAAA,cAAC,MAAI,CAAA,UAAU,cAAc,IAAKD,GAC/BP,GAAA,YAAAA,EAAQ,IAAI,CAACW,EAAOC,IACnBJ,EAAA,cAAC,MAAA,CACC,IAAKI,EACL,UAAW,qBACTR,EAAe,QAAQO,EAAM,MAAM,SAAS,CAAC,EAAI,GAC7C,4BACA,IAAA,EAGLA,EAAM,OACLH,EAAA,cAAC,UAAA,CACC,UAAW,wBACTG,EAAM,QAAU,8BAAgC,IAAA,EAGlDH,EAAA,cAAC,MAAI,CAAA,IAAKG,EAAM,MAAO,IAAKA,EAAM,SAAU,MAAM,KAAK,OAAO,IAAK,CAAA,CACrE,EAEFH,EAAA,cAAC,SAAM,UAAU,qBAAqB,QAAS,GAAGN,KAAMU,GACrD,EAAAD,EAAM,KACT,EACAH,EAAA,cAAC,QAAA,CACC,UAAU,2CACV,KAAK,WACL,KAAMT,EACN,GAAI,GAAGG,KAAMU,IACb,MAAOD,EAAM,MACb,SAAUF,CAAA,CACZ,CAEH,EACH,CAEJ"}