import { Box, Input, Tooltip } from '@wix/design-system';
import {
  FlagSmall,
  PinSmall,
  StatusAlertSmall,
} from '@wix/wix-ui-icons-common/lazy';
import React from 'react';
import { FiltersMap } from '@wix/bex-core';
import { CollectionViewsState } from '../../state';
import { observer } from 'mobx-react-lite';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { VIEWS_REDESIGN_EXPERIMENT } from './ViewsDropdown';

export type ViewsDropdownPrefixProps<T, F extends FiltersMap> = {
  state: CollectionViewsState<T, F>;
};

export function _ViewsDropdownPrefix<T, F extends FiltersMap>(
  props: ViewsDropdownPrefixProps<T, F>,
) {
  const { state } = props;
  const container = useWixPatternsContainer();
  const isRedesign = container.internalExperiments?.enabled(
    VIEWS_REDESIGN_EXPERIMENT,
  );

  const { views } = state;
  const {
    collection: { translate: t },
  } = views;

  if (
    !views.isCurrentViewSelected ||
    (views.isCurrentViewSelected && state.isViewChanged)
  ) {
    return (
      <Input.Affix>
        <Box dataHook="view-pending-changes">
          <Tooltip
            appendTo="window"
            content={
              views.isCurrentViewSelected
                ? t('cairo.manageView.tooltip')
                : t('cairo.manageView.unsaved.tooltip')
            }
          >
            <Box verticalAlign="middle" color="D40">
              <StatusAlertSmall />
            </Box>
          </Tooltip>
        </Box>
      </Input.Affix>
    );
  }

  if (views.isDefaultView) {
    return (
      <Input.Affix>
        <Box dataHook="view-default">
          {isRedesign ? <PinSmall /> : <FlagSmall />}
        </Box>
      </Input.Affix>
    );
  }

  return null;
}

export const ViewsDropdownPrefix = observer(_ViewsDropdownPrefix);