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

import {Label} from 'components/label';
import {theme} from 'components/shared/theme';

const {colors, spacing} = theme;
const Container = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  label {
    margin-left: ${spacing.xxSmall};
    margin-right: ${spacing.xxSmall};
  }
`;
const CheckboxContainer = styled.div`
  display: inline-block;
  vertical-align: middle;
  outline: none;
  height: 1rem;
`;
const Icon = styled.svg`
  fill: none;
  stroke: ${colors.black};
  stroke-width: 2px;
`;
const HiddenCheckbox = styled.input.attrs({type: 'checkbox'})`
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
`;
const StyledCheckbox = styled.div<{checked?: boolean}>`
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: ${({checked}) => (checked ? colors.red : colors.transparent)};
  border-radius: 3px;
  transition: all 150ms;
  outline: none;
  border: 1px solid ${({checked}) => (checked ? 'none' : colors.gray400)};

  ${Icon} {
    visibility: ${({checked}) => (checked ? 'visible' : 'hidden')};
  }
`;
const Checkbox = (props: {
  value: string;
  id?: string;
  checked?: boolean;
  onChange: (event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLDivElement>) => void;
  label?: string;
}): React.JSX.Element => {
  const {checked, onChange, label, id} = props;

  return (
    <Container>
      <CheckboxContainer>
        <HiddenCheckbox {...props} />
        <StyledCheckbox onClick={onChange} checked={checked}>
          <Icon viewBox="0 0 24 24">
            <polyline points="20 6 9 17 4 12" />
          </Icon>
        </StyledCheckbox>
      </CheckboxContainer>
      {label && <Label htmlFor={id || label} text={label} />}
    </Container>
  );
};

export default Checkbox;