import styled from '@emotion/styled';

import { useStores } from '@/app/(root)/AppProviders';
import { useContext } from '@/hooks/useContextSelector';
import { ModelTier } from '@/hooks/useGenerate';
import { PlanFeature } from '@/state/sessionStore';
import { isFeatureEnabledForPlan } from '@/utils/session';
import {
  DEFAULT_BLUEJAY_MODEL_NAME,
  DEFAULT_CROW_MODEL_NAME,
  canUseModel,
} from '@/utils/utils';

import Button, { ButtonSize, ButtonVariant } from '../button/Button';
import { Tooltip } from '../tooltip/Tooltip';
import StudioContext from './StudioContext';

const ModelTierPickerWrapper = styled.div`
  border-radius: 4px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(40px, 1fr);
  background-color: var(--color-background-secondary);
  height: 25px;
  > * {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    padding: 0;
    font-family:
      'PP Neue Montreal', 'Neue Montreal', ui-sans-serif, system-ui, sans-serif;
    text-transform: none;
  }
`;

const ModelTierPicker = () => {
  const { session } = useStores();
  const { modelTier, setModelTier, modelOverride, setModelOverride } =
    useContext(StudioContext);
  return (
    <ModelTierPickerWrapper>
      <Tooltip label='v4.5 will still be used for "Smart" and "Fixed" replacements'>
        <Button
          size={ButtonSize.Mini}
          variant={
            modelTier === ModelTier.V3_5 && !modelOverride
              ? ButtonVariant.Primary
              : ButtonVariant.Tertiary
          }
          onClick={() => {
            setModelTier(ModelTier.V3_5);
            setModelOverride(null);
          }}
        >
          v3.5
        </Button>
      </Tooltip>
      <Tooltip label='v4.5 will still be used for "Smart" and "Fixed" replacements'>
        <Button
          size={ButtonSize.Mini}
          variant={
            modelTier === ModelTier.V4 && !modelOverride
              ? ButtonVariant.Primary
              : ButtonVariant.Tertiary
          }
          onClick={() => {
            setModelTier(ModelTier.V4);
            setModelOverride(null);
          }}
        >
          v4
        </Button>
      </Tooltip>
      {isFeatureEnabledForPlan(session, PlanFeature.Auk) ? (
        <Button
          size={ButtonSize.Mini}
          variant={
            modelTier === ModelTier.V4_5 && !modelOverride
              ? ButtonVariant.Primary
              : ButtonVariant.Tertiary
          }
          onClick={() => {
            setModelTier(ModelTier.V4_5);
            setModelOverride(null);
          }}
        >
          v4.5
        </Button>
      ) : null}
      {canUseModel(session.billingModels, DEFAULT_BLUEJAY_MODEL_NAME) ? (
        <Button
          size={ButtonSize.Mini}
          variant={
            modelTier === ModelTier.V4_5_PLUS && !modelOverride
              ? ButtonVariant.Primary
              : ButtonVariant.Tertiary
          }
          onClick={() => {
            setModelTier(ModelTier.V4_5_PLUS);
            setModelOverride(null);
          }}
        >
          v4.5+
        </Button>
      ) : null}
      {canUseModel(session.billingModels, DEFAULT_CROW_MODEL_NAME) ? (
        <Button
          size={ButtonSize.Mini}
          variant={
            modelTier === ModelTier.V5 && !modelOverride
              ? ButtonVariant.Primary
              : ButtonVariant.Tertiary
          }
          onClick={() => {
            setModelTier(ModelTier.V5);
            setModelOverride(null);
          }}
        >
          v5
        </Button>
      ) : null}
    </ModelTierPickerWrapper>
  );
};
export default ModelTierPicker;