{"size": 3022, "ext": "js", "max_stars_repo_path": "frontend/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/PermissionCheck.js", "max_stars_repo_name": "pradeepkumarcm-egov/DIGIT-Dev", "max_stars_repo_stars_event_min_datetime": "2022-02-04T15:17:57.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-14T11:34:39.000Z", "max_issues_repo_path": "frontend/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/PermissionCheck.js", "max_issues_repo_name": "pradeepkumarcm-egov/DIGIT-Dev", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "frontend/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/PermissionCheck.js", "max_forks_repo_name": "pradeepkumarcm-egov/DIGIT-Dev", "max_forks_repo_forks_event_min_datetime": "2021-08-18T15:33:22.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-25T07:30:28.000Z"}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": 11, "avg_line_length": 34.7356321839, "max_line_length": 279, "alphanum_fraction": 0.5635340834}
import { CheckBox, LinkButton, TextInput,Close, CardSubHeader } from "@egovernments/digit-ui-react-components";
import React, { useEffect, useState } from "react";

const PermissionCheck = ({ permissions, t }) => {
  const [approvalChecks, setApprovalChecks, clearApprovals] = Digit.Hooks.useSessionStorage("OBPS_APPROVAL_CHECKS", permissions?.map(permission => ({ label: permission, checked: false }))); //useState(() => permissions?.map(permission => ({ label: permission, checked: false })))
  const [newApprovals,  setNewApprovals, clearNewApprovals] = Digit.Hooks.useSessionStorage('OBPS_NEW_APPROVALS', []);

  useEffect(() => {
    return () => {
      Digit.SessionStorage.del("OBPS_NEW_APPROVALS");
      Digit.SessionStorage.del("OBPS_APPROVAL_CHECKS");
    }
  }, [])

  const handleAdd = () => {
    setNewApprovals([...newApprovals, { label: '' }]);
  }

  const handleRemove = (index) => {
    const values = [...newApprovals];
            values.splice(index, 1);
            setNewApprovals([...values]);     
  }

  const handleChange = (event, index) => {
    setNewApprovals(() => {
      return newApprovals?.map((approval, id) => {
        if (index === id) {
          return {
            label: event?.target?.value,
          }
        }
        return approval;
      })
    })
  }

  const handleCheck = (event, label, index) => {
    const isChecked = event.target.checked;
    setApprovalChecks(() => {
      return approvalChecks?.map((approval, id) => {
        if (index === id) {
          return {
            ...approval,
            checked: isChecked
          }
        }
        return approval;
      })
    })
  }

  return (
    <div>
      <CardSubHeader style={{ marginBottom: "16px", fontSize: "24px" }}>{t("BPA_PERMIT_CONDITIONS")}</CardSubHeader>
      {approvalChecks?.map((permission, index) => (
        <CheckBox
          key={index}
          styles={{ margin: "20px 0 40px",maxWidth:"70%" }}
          label={permission?.label}
          checked={permission?.checked}
          onChange={(event => handleCheck(event, permission?.label, index))}
          isLabelFirst={true}
          index={index}
        />
      ))}
      {newApprovals?.map((approval, index) => (
       <div> <TextInput key={index} value={approval?.label} onChange={event => handleChange(event, index)} textInputStyle={{maxWidth: "830px", width: "830px"}} placeholder={"Enter permit conditions.........."} />
         {<LinkButton
          label={
            <div>
              <span>
              <Close style={{float: "right", position: "relative", bottom: "32px", marginTop: "-21px", marginRight: "35%" }}/>
              </span>
            </div>
          }
          style={{ }}
          onClick={(e) => handleRemove(index)}
        />}
       </div>
      ))}
      <LinkButton style={{ color: "#f47738", maxWidth: "10%", /* float: "right", marginTop: "-50px", */ marginRight: "3%" }} label={t(`BPA_ADD_MORE`)} onClick={handleAdd} />
    </div>
  )
}

export default PermissionCheck;