import styled from '@emotion/styled';
import { twMerge } from 'tailwind-merge';

import { CheckboxIcon, CheckboxOutlineIcon, SuccessIcon } from '@/icons';

import Button, {
  Props as ButtonProps,
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '../button/Button';
import {
  ContextMenuItem,
  ContextMenuItemMainText,
  ContextMenuItemSubtext,
} from '../contextMenu/ContextMenu';

export const FilterSectionWrapper = styled.div<{ compact?: boolean }>`
  display: flex;
  flex-direction: row;
  gap: ${({ compact }) => (compact ? '4px' : '8px')};
  padding: ${({ compact }) => (compact ? '0 8px 8px 8px' : '0 16px 16px 16px')};
  flex-shrink: 0;
  height: ${({ compact }) => (compact ? '44px' : '56px')};
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
`;

export const SearchInputWrapper = styled.div`
  flex-grow: 1;
  border-radius: 50px;
  padding: 8px 16px;
  font-size: 14px;
  background-color: var(--color-background-glass-thin);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
`;

export const SearchInput = styled.input`
  flex-grow: 1;
  background-color: transparent;
  border: none;
  outline: none;
`;

export const FilterButton = ({
  active,
  ...props
}: ButtonProps & { active?: boolean }) => {
  return (
    <Button
      shape={ButtonShape.Pill}
      variant={active ? ButtonVariant.Primary : ButtonVariant.Secondary}
      {...props}
      className={twMerge('p-2.5 text-xs', props.className)}
    />
  );
};

export const FilterDropdownButton = (props: ButtonProps) => (
  <Button
    shape={ButtonShape.Pill}
    size={ButtonSize.Small}
    variant={ButtonVariant.Standard}
    {...props}
    className={twMerge('text-xs leading-[24px]', props.className)}
  />
);

export const FilterMenuItem = ({
  label,
  value,
  onChange,
  icon,
  keepMenusOpen = true,
  ariaLabel,
}: {
  label: string;
  value: boolean;
  onChange: (value: boolean) => void;
  icon?: React.ReactNode;
  keepMenusOpen?: boolean;
  ariaLabel?: string;
}) => {
  return (
    <ContextMenuItem
      keepMenusOpen={keepMenusOpen}
      className={value ? 'bg-background-fog-thin' : ''}
      onClick={() => onChange(!value)}
      aria-label={ariaLabel}
    >
      <div className='flex w-full items-center justify-between'>
        <div className='flex items-center gap-2'>
          {icon && <span className='text-foreground-secondary'>{icon}</span>}
          <ContextMenuItemMainText>{label}</ContextMenuItemMainText>
        </div>
        <ContextMenuItemSubtext>
          {value ? (
            <CheckboxIcon className='text-foreground-primary' />
          ) : (
            <CheckboxOutlineIcon className='text-foreground-primary' />
          )}
        </ContextMenuItemSubtext>
      </div>
    </ContextMenuItem>
  );
};

export const SortMenuItem = ({
  label,
  active,
  onActivate,
}: {
  label: string;
  active: boolean;
  onActivate: () => void;
}) => {
  return (
    <ContextMenuItem
      onClick={onActivate}
      className={active ? 'bg-background-fog-thin' : ''}
    >
      <ContextMenuItemMainText>{label}</ContextMenuItemMainText>
      <ContextMenuItemSubtext className='ml-8'>
        {active && <SuccessIcon className='-mt-1 text-foreground-primary' />}
      </ContextMenuItemSubtext>
    </ContextMenuItem>
  );
};