import clsx from 'clsx';
import { observer } from 'mobx-react-lite';

import { useStores } from '@/app/(root)/AppProviders';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { truncateText } from '@/utils/utils';

type Props = {
  tag: string;
  icon?: React.FC;
  isActive?: boolean;
  onClickStyle?: (style: string) => void;
  'data-testid'?: string;
};

export const SuggestedStyle = observer(
  ({
    tag,
    icon,
    isActive = false,
    onClickStyle,
    'data-testid': testId,
  }: Props) => {
    const { createV2 } = useStores();
    return (
      <Button
        key={tag}
        data-testid={testId}
        className={clsx(
          'line-clamp-1 flex w-full max-w-fit flex-row items-center gap-[2px] px-3 py-[6px] text-[16px] font-medium text-nowrap whitespace-nowrap text-foreground-secondary/70 select-none',
          {
            'bg-primary text-dumbo-50': isActive,
          }
        )}
        variant={ButtonVariant.Secondary}
        size={ButtonSize.Small}
        shape={ButtonShape.Pill}
        iconStart={icon}
        onClick={() => {
          if (onClickStyle) {
            onClickStyle(tag);
            return;
          }
          if (createV2.isAdvancedMode) {
            createV2.setTagInput(
              createV2.tagInput.trim() === ''
                ? tag
                : `${createV2.tagInput.trim()}, ${tag}`
            );
          } else {
            if (!isActive) {
              createV2.setActiveTags([...createV2.activeTags, tag]);
            } else {
              createV2.setActiveTags([
                ...createV2.activeTags.filter(
                  (activeTag: string) => activeTag !== tag
                ),
              ]);
            }
          }
        }}
      >
        {truncateText(tag, 32)}
      </Button>
    );
  }
);