/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { observer } from "mobx-react";
import { useTranslation } from "@plane/i18n";
import { cn } from "@plane/utils";
// hooks
import { useProjectInbox } from "@/hooks/store/use-project-inbox";
// local imports
import { InboxIssueAppliedFiltersDate } from "./date";
import { InboxIssueAppliedFiltersLabel } from "./label";
import { InboxIssueAppliedFiltersMember } from "./member";
import { InboxIssueAppliedFiltersPriority } from "./priority";
import { InboxIssueAppliedFiltersState } from "./state";
import { InboxIssueAppliedFiltersStatus } from "./status";

type TInboxIssueAppliedFiltersProps = {
  className?: string;
};

export const InboxIssueAppliedFilters = observer(function InboxIssueAppliedFilters(
  props: TInboxIssueAppliedFiltersProps
) {
  const { className } = props;
  const { t } = useTranslation();
  const { getAppliedFiltersCount } = useProjectInbox();

  if (getAppliedFiltersCount === 0) return <></>;
  return (
    <div className={cn("relative z-[20] px-4 pb-3", className)}>
      <div className="flex flex-wrap items-center gap-2">
        <InboxIssueAppliedFiltersStatus />
        <InboxIssueAppliedFiltersState />
        <InboxIssueAppliedFiltersPriority />
        <InboxIssueAppliedFiltersMember filterKey="assignees" label={t("assignees")} />
        <InboxIssueAppliedFiltersMember filterKey="created_by" label={t("created_by")} />
        <InboxIssueAppliedFiltersLabel />
        <InboxIssueAppliedFiltersDate filterKey="created_at" label={t("created_at")} />
        <InboxIssueAppliedFiltersDate filterKey="updated_at" label={t("updated_at")} />
      </div>
    </div>
  );
});
