import CheckIcon from '@public/images/svg/check.svg';
import clsx from 'clsx';
import React, { ForwardedRef, forwardRef } from 'react';

import { Ripple } from '../animation';
import { Label, LabelProps } from '../label';
import { RawInput } from '../raw';
import styles from './styles.module.scss';
import { CheckboxProps } from './types';

function CheckboxInner(
  { scale = 'm', label = {}, required, ...props }: Omit<CheckboxProps, 'ref'>,
  ref: ForwardedRef<HTMLInputElement>,
) {
  const wrapperClassName = clsx(styles.wrapper, styles[scale]);

  const labelProps: LabelProps = {
    position: 'right',
    scale: scale,
    ...label,
    required: { value: required, ...label.required },
  };

  return (
    <Label {...labelProps}>
      <div className={wrapperClassName}>
        <RawInput
          className={styles.input}
          type="checkbox"
          ref={ref}
          required={required}
          {...props}
        />
        <div className={styles.checkbox}>
          <CheckIcon className={styles.icon} />
        </div>
        <Ripple />
      </div>
    </Label>
  );
}

export const Checkbox = forwardRef(CheckboxInner);