import React, {useEffect, useState} from "react";
import ValidateTableItem from "./ValidateItem";

function ValidateTable({
 setValidatePanelOpen
}) {

  const validateData = [
    {
      id: '10',
      check: true,
      filed: 'Second name',
      data: 'Pavel',
      status: 'Correct',
      seed: '1234 ... 1234',
    },
    {
      id: '11',
      check: true,
      filed: 'First name',
      data: 'Thownetc',
      status: 'Correct',
      seed: '4567 ... 0987',
    },
    {
      id: '12',
      check: false,
      filed: 'Gender',
      data: 'Female',
      status: 'Incorrect',
      seed: '4567 ... 0987',
    },
    {
      id: '13',
      check: false,
      filed: 'Document',
      data: 'Passport',
      status: 'Missed',
      seed: '4567 ... 0987',
    },
    {
      id: '14',
      check: true,
      filed: 'Document ID',
      data: '1233425345',
      status: 'Correct',
      seed: '1234 ... 1234',
    },
  ];

  const [selectAll, setSelectAll] = useState(false);
  const [marked, setMarked] = useState([]);
  const [selectedList, setSelectedList] = useState([]);

  useEffect(() => {
    setSelectedList(validateData);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handleSelectAll = () => {
    setSelectAll(!selectAll);
    setMarked(selectedList.map(li => li.id));
    if (selectAll) {
      setMarked([]);
    }
  };

  const handleClick = e => {
    const { id, checked } = e.target;
    setSelectAll(false);
    setMarked([...marked, id]);
    if (!checked) {
      setMarked(marked.filter(item => item !== id));
    }
  };

  return (
      <div className="w-fit">
        <div>
          {/* Table */}
          <div className="overflow-x-auto">
            <table className="table-auto w-fit">
              {/* Table header */}
              <thead className="bg-white text-xs font-semibold uppercase text-slate-500 border-t border-b-2 border-slate-200">
              <tr>
                <th className="first:pl-4 last:pr-5 py-3 whitespace-nowrap w-px">
                  <div className="flex items-center">
                    <label className="inline-flex">
                      <span className="sr-only">Select all</span>
                      <input className="form-checkbox" type="checkbox" checked={selectAll} onChange={handleSelectAll} />
                    </label>
                  </div>
                </th>
                <th className="px-2 first:pl-5 pr-[136px] py-3 whitespace-nowrap">
                  <div className="font-semibold text-left">FIELD</div>
                </th>
                <th className="px-2 first:pl-5 pr-[154px] py-3 whitespace-nowrap">
                  <div className="font-semibold text-left">DATA</div>
                </th>
                <th className="min-w-[191px] px-2 first:pl-5 pr-[168px] py-3 whitespace-nowrap">
                  <div className="pl-7 font-semibold text-left">SEED</div>
                </th>
                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
                  <div className="pl-2 font-semibold text-left">STATUS</div>
                </th>
                <th className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap" />
              </tr>
              </thead>
              {/* Table body */}
              <tbody className="text-sm divide-y divide-slate-200 border-b border-slate-200">
              {selectedList.map((data) => {
                return (
                    <ValidateTableItem
                        key={data.id}
                        id={data.id}
                        filed={data.filed}
                        data={data.data}
                        status={data.status}
                        seed={data.seed}
                        check={data.check}
                        handleClick={handleClick}
                        isChecked={marked.includes(data.id)}
                        setValidatePanelOpen={setValidatePanelOpen}
                    />
                );
              })}
              </tbody>
            </table>
          </div>
        </div>
      </div>
  );
}

export default ValidateTable;