/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import React, {ChangeEvent} from 'react';
import styled from 'styled-components';
import {theme} from 'components/shared/theme';

const CheckboxContainer = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: ${theme.spacing.small};
`;

const HiddenCheckbox = styled.input.attrs({type: 'checkbox'})`
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
`;

const StyledCheckbox = styled.div<{checked: boolean}>`
  display: inline-block;
  width: 16px;
  height: 16px;
  background: ${props => (props.checked ? theme.colors.red : theme.colors.white)};
  border: 2px solid ${theme.colors.gray400};
  border-radius: 3px;
  transition: all 150ms;
  cursor: pointer;
  margin-right: ${theme.spacing.small};

  &::after {
    content: '';
    position: relative;
    display: ${props => (props.checked ? 'block' : 'none')};
    left: 3px;
    top: 0px;
    width: 4px;
    height: 8px;
    border: solid ${theme.colors.white};
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
`;

const Label = styled.label`
  cursor: pointer;
  color: ${theme.colors.gray900};
  font-size: ${theme.typography.primaryFontSize};
  user-select: none;
`;

interface CheckboxProps {
  id: string;
  checked: boolean;
  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
  label?: string;
  value?: string;
  disabled?: boolean;
  className?: string;
}

const Checkbox: React.FC<CheckboxProps> = ({id, checked, onChange, label, value, disabled = false, className}) => {
  return (
    <CheckboxContainer className={className}>
      <HiddenCheckbox id={id} checked={checked} onChange={onChange} value={value} disabled={disabled} />
      <StyledCheckbox checked={checked} />
      {label && <Label htmlFor={id}>{label}</Label>}
    </CheckboxContainer>
  );
};

export default Checkbox;