import React from 'react';
import styled from 'styled-components';
import TrueMatkIcon from '../../../../assets/icons/TrueMatkIcon';

interface CheckBoxWrapperProps {
  columns: Array<{ key: string; label: string; alwaysVisible?: boolean }>;
  visibleColumns: string[];
  handleColumnVisibilityChange: (key: string) => void;
}

const CheckBoxWrapper: React.FC<CheckBoxWrapperProps> = ({
  columns,
  visibleColumns,
  handleColumnVisibilityChange,
}) => {
  return (
    <StyledCheckboxWrapper>
      {columns.map(column => (
        <StyledColumnCheckbox  className={column.alwaysVisible ? 'hide' : ''} key={column.key}>
          <input
            type="checkbox"
            checked={
              visibleColumns.includes(column.key) || column.alwaysVisible
            }
            disabled={column.alwaysVisible}
            onChange={() => handleColumnVisibilityChange(column.key)}
          />
          <TrueMatkIcon />

          <i></i>
          {column.label}
        </StyledColumnCheckbox>
      ))}
    </StyledCheckboxWrapper>
  );
};

export default CheckBoxWrapper;

export const StyledColumnCheckbox = styled.label`
  margin-right: 12px;
  &.hide{
    display: none;
  }

  i {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: #3a3630;
    position: absolute;
    left: 8px;
    top: 5px;
  }
  svg {
    display: none;
    position: absolute;
    left: 8px;
    top: 5px;
    z-index: 9;
  }

  input:checked ~ svg {
    display: block;
  }
  input:disabled ~ svg path {
    fill: transparent;
  }
`;

export const StyledCheckboxWrapper = styled.div`
  margin-bottom: 16px;
`;
