/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-noninteractive-element-interactions: warn */
import clsx from 'clsx';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { twMerge } from 'tailwind-merge';

import { COMMENT_REPORT_REASONS } from './utils';

export type Props = Omit<
  React.HTMLAttributes<HTMLDivElement>,
  'defaultValue' | 'value' | 'onChange'
> & {
  defaultValue?: string;
  value?: string;
  onChange: (value: string) => void;
};

const CommentReportReasons: React.FC<Props> = (props) => {
  const {
    className,
    defaultValue,
    value: explicitValue,
    onChange,
    ...restProps
  } = props;
  const { t } = useTranslation();
  const [value, setValue] = useState(defaultValue);
  return (
    <div {...restProps} className={twMerge('flex flex-col gap-2', className)}>
      <p className='pb-2 text-sm text-secondary'>
        {t('comments.confirmReportReason')}
      </p>
      <ul className='flex flex-col gap-2'>
        {COMMENT_REPORT_REASONS.map((reason) => (
          <li
            key={reason}
            className='flex flex-row items-center gap-4'
            onClick={() => {
              setValue(reason);
              onChange(reason);
            }}
          >
            <button
              className={clsx(
                'relative h-4 w-4 rounded-full border-2 border-current text-secondary after:absolute after:inset-0.5 after:rounded-full',
                {
                  'after:bg-current': reason === (explicitValue ?? value),
                }
              )}
            />
            <span>{t(`comments.reportReason.${reason}`) || reason}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default CommentReportReasons;