import clsx from 'clsx';
import { shuffle } from 'lodash-es';
import { observer } from 'mobx-react-lite';
import { useCallback, useEffect, useRef, useState } from 'react';

import { SuggestedStyle } from '@/app/(root)/create/createV2/SuggestedStyle';
import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { RotateReverseIcon } from '@/icons';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { TagSuggestionContexts } from '@/state/createV2Store';
import { curatedStyles } from '@/utils/constants';

export enum SuggestedStylesVariants {
  OneLine = 'one_line',
  TwoLine = 'two_line',
}

type Props = {
  isShown: boolean;
  onClickStyle?: (style: string) => void;
  variant?: SuggestedStylesVariants;
  context: TagSuggestionContexts;
  activeStyles: string;
};

export const SuggestedStyles = observer(
  ({
    isShown,
    onClickStyle,
    context,
    variant = SuggestedStylesVariants.TwoLine,
    activeStyles,
  }: Props) => {
    const scrollContainerRef = useRef<any>(null);
    const [needsCorrectivePadding, setNeedsCorrectivePadding] =
      useState<boolean>(false);
    const [availableTags, setAvailableTags] = useState<string[]>(
      shuffle(curatedStyles)
    );

    useEffect(() => {
      setNeedsCorrectivePadding(
        !!scrollContainerRef.current &&
          (scrollContainerRef.current?.offsetHeight || 0) -
            (scrollContainerRef.current?.clientHeight || 0) ===
            0
      );
    }, [
      scrollContainerRef.current,
      scrollContainerRef.current?.offsetHeight,
      scrollContainerRef.current?.clientHeight,
    ]);

    const refreshTags = useCallback(async () => {
      setAvailableTags(shuffle(curatedStyles));
      logWebUserEvent({
        actionName: 'HomePageAdvancedCreateStylesShuffleClicked',
      });
    }, [context]);
    return (
      <div className='flex h-auto flex-col pb-2'>
        <div
          className={clsx(
            'relative flex flex-row items-start gap-1 transition-[height] duration-500 ease-in-out',
            {
              'mt-2 h-0': !isShown,
              'mt-2 h-[80px]':
                isShown && variant === SuggestedStylesVariants.TwoLine,
              'mt-4 h-[45px]':
                isShown && variant === SuggestedStylesVariants.OneLine,
              'flex-wrap overflow-hidden':
                variant === SuggestedStylesVariants.TwoLine,
            }
          )}
        >
          {availableTags.length > 0 ? (
            <Button
              key='refresh__tags'
              className={clsx(
                'mt-[6px] ml-[6px] bg-transparent backdrop-blur-none enabled:hover:bg-transparent enabled:hover:backdrop-blur-none',
                {
                  'mb-2': variant === SuggestedStylesVariants.OneLine,
                }
              )}
              icon={RotateReverseIcon}
              variant={ButtonVariant.Glass}
              size={ButtonSize.Mini}
              shape={ButtonShape.Pill}
              onClick={(e) => {
                refreshTags();
                // logWebUserEvent({
                //   actionName: 'RefreshSuggestedTags',
                //   context: {
                //     createVersion: CREATE_VERSION,
                //     styleContext: context,
                //   },
                // });
                e.stopPropagation();
              }}
            />
          ) : null}

          {variant === SuggestedStylesVariants.OneLine ? (
            <div className='relative w-full'>
              <div
                ref={scrollContainerRef}
                className={clsx(
                  'custom-scrollbar-transparent absolute top-0 left-0 w-full overflow-x-scroll!',
                  {
                    'pb-2': needsCorrectivePadding,
                  }
                )}
                onWheel={(e) => {
                  if (
                    e.deltaY > 0 &&
                    Math.abs(e.deltaY) > Math.abs(e.deltaX) &&
                    scrollContainerRef.current
                  ) {
                    scrollContainerRef.current.scrollLeft -= 20;
                    e.preventDefault();
                  } else if (
                    e.deltaY < 0 &&
                    Math.abs(e.deltaY) > Math.abs(e.deltaX) &&
                    scrollContainerRef.current
                  ) {
                    scrollContainerRef.current.scrollLeft += 20;
                    e.preventDefault();
                  }
                }}
              >
                <div className='flex h-auto w-fit flex-row items-start gap-[2px]'>
                  {availableTags
                    .filter(
                      (tag: string) =>
                        !activeStyles?.toLowerCase().includes(tag.toLowerCase())
                    )
                    .map((tag: string) => (
                      <SuggestedStyle
                        key={tag}
                        tag={tag}
                        onClickStyle={onClickStyle}
                      />
                    ))}
                </div>
              </div>
            </div>
          ) : null}
        </div>
      </div>
    );
  }
);