import { observer } from 'mobx-react-lite';
import React from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { ProjectStore } from '@/state/projectStore';

import BaseMultiSelectDropdown from './BaseMultiSelectDropdown';

interface ProjectMultiSelectDropdownV2Props {
  project: ProjectStore;
}

const ProjectMultiSelectDropdownV2: React.FC<ProjectMultiSelectDropdownV2Props> =
  observer(({ project }) => {
    const { session } = useStores();

    return (
      <BaseMultiSelectDropdown
        store={{
          filters: project.filters,
          updateFilters: project.updateFilters.bind(project),
          clearFilters: project.clearFilters.bind(project),
        }}
        actionName='ProjectMultiSelectDropdownClicked'
        context={{ projectId: project.currentProjectId }}
        flags={{
          ...(session.flags || {}),
          show_scenes_filters: false,
        }}
      />
    );
  });

export default ProjectMultiSelectDropdownV2;