/* eslint jsx-a11y/click-events-have-key-events: warn */
import clsx from 'clsx';

import { useStores } from '@/app/(root)/AppProviders';
import { ModalTypes } from '@/components/modal/constants/ModalTypes';
import { Tooltip } from '@/components/tooltip/Tooltip';
import { FeatureKey } from '@/state/sessionStore';

export const FakeSlider: React.FC<{ label: string; tooltip: string }> = ({
  label,
  tooltip,
}) => {
  const { menus } = useStores();

  const handleClick = () => {
    menus.setCurrentUpsellFeature(FeatureKey.ADVANCED_SLIDERS);
    menus.openModal(ModalTypes.UPSELL_MODAL);
  };

  return (
    <Tooltip label={tooltip} placement='top'>
      <div
        className={clsx(
          'flex flex-1 cursor-pointer items-center rounded-[10px] bg-background-primary px-4 py-2 opacity-60 select-none',
          'transition-opacity hover:opacity-80'
        )}
        onClick={handleClick}
        tabIndex={0}
        role='button'
        aria-disabled='true'
      >
        <div className='flex max-w-[140px] flex-1 items-center gap-1 pr-4 whitespace-nowrap'>
          <span className='text-sm text-foreground-tertiary-glass'>
            {label}
          </span>
        </div>
        <div className='flex h-auto w-full flex-1 flex-row-reverse'>
          <div className='relative flex h-8 w-full flex-row items-center justify-between bg-transparent'>
            {Array.from({ length: 11 }).map((_, i) => (
              <div
                key={i}
                className='h-8 w-[2px] rounded-full'
                style={{ backgroundColor: 'rgba(255,255,255,0.15)' }}
              />
            ))}
            <div
              className='absolute left-1/2 h-8 w-3 -translate-x-1/2 rounded-full bg-accent-pink-on-primary opacity-50 shadow'
              style={{ pointerEvents: 'none' }}
            />
          </div>
        </div>
        <div className='flex max-w-[60px] flex-1 flex-row-reverse whitespace-nowrap'>
          <span className='text-sm text-foreground-tertiary-glass'>50%</span>
        </div>
      </div>
    </Tooltip>
  );
};