import React, { InputHTMLAttributes } from 'react';
import styled from 'styled-components';

interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
  checked: boolean;
  icon?: React.ReactNode;
  imageSrc: string;
  label: string;
  enabled: boolean;
  onClickCheckbox: (service: string) => void;
}

function Checkbox(props: CheckboxProps) {
  const {
    imageSrc,
    label,
    checked,
    enabled = false,
    onClickCheckbox,
    ...rest
  } = props;
  return (
    <MainContainer
      $enabled={enabled}
      $checked={checked}
      onClick={() => onClickCheckbox(label)}
    >
      {/* Custom Checkbox */}
      <CheckboxContainer>
        <HiddenCheckbox type="checkbox" $enabled={enabled} {...rest} />
        <CircleContainer $checked={checked} $enabled={enabled}>
          <Circle $checked={checked} />
        </CircleContainer>
      </CheckboxContainer>
      <InformationContainer>
        <Image
          src={imageSrc}
          $checked={checked}
          $enabled={enabled}
          className="checkbox-img"
        />
        <Text $checked={checked} className="label">
          {label?.replaceAll('_', ' ')}
        </Text>
      </InformationContainer>
    </MainContainer>
  );
}

const Image = styled.img<{ $checked: boolean; $enabled: boolean }>`
  height: 28px;
  width: 20px;
  filter: ${props => (props.$checked ? 'grayscale(0)' : 'grayscale(1)')};
  cursor: ${props => (props.$enabled ? 'pointer' : 'not-allowed')};
`;

const CircleContainer = styled.span<{ $checked: boolean; $enabled: boolean }>`
  height: 20px;
  width: 20px;
  border: 1px solid ${props => (props.$checked ? '#feba30' : '#e0e2e7')};
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px;
  left: 8px;
  cursor: ${props => (props.$enabled ? 'pointer' : 'not-allowed')};
`;

const Circle = styled.span<{ $checked: boolean }>`
  height: 14px;
  width: 14px;
  background: ${props => (props.$checked ? '#feba30' : '#ffffff')};
  border-radius: 50%;
  display: inline-block;
  transition: 0.2s ease all;
`;

const Text = styled.span<{ $checked: boolean }>`
  color: ${props => (props.$checked ? '#3a3630' : 'rgba(58, 54, 48, 0.50)')};
  font-family: 'lato', sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  text-transform: capitalize;
`;

const InformationContainer = styled.div`
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
`;

const CheckboxContainer = styled.div`
  display: flex;
`;

const HiddenCheckbox = styled.input<{ $enabled: boolean }>`
  border: 0;
  height: 100%;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 100%;
  opacity: 0;
  /* cursor: pointer; */
  cursor: ${props => (props.$enabled ? 'pointer' : 'not-allowed')};
  top: 0;
  left: 0;
`;

const MainContainer = styled.div<{ $enabled: boolean; $checked: boolean }>`
  display: flex;
  width: 130px;
  height: 93px;
  gap: 10px;
  border-radius: 15px;
  border: 1px solid ${props => (props.$checked ? '#cbc8c2' : '#e0e2e7')};
  align-items: center;
  justify-content: center;
  position: relative;
  background: ${props => (props.$checked ? '#ffffff' : '#f8fafc')};
  box-shadow: ${props =>
    props.$checked ? '0px 4px 8px -2px rgba(16, 24, 40, 0.1)' : 'none'};
  pointer-events: ${props => (props.$enabled ? 'visible' : 'none')};

  /* &:hover {
    border: 1px solid ${props => (props.$enabled ? '#cbc8c2' : '#e0e2e7')};
    .checkbox-img {
      filter: ${props => (props.$enabled ? 'grayscale(0)' : 'grayscale(1)')};
    }
  } */

    ${props =>
      props.$enabled &&
      `&:hover {
          border: 1px solid #cbc8c2;

        .checkbox-img {
          filter: grayscale(0);
        }
        
        .label {
          color: #3a3630;
        }
      }
  `}
`;

export default Checkbox;
