/*
 * Copyright OpenSearch Contributors
 * SPDX-License-Identifier: Apache-2.0
 */
import React, { useMemo, useState } from "react";
import { RouteComponentProps } from "react-router-dom";
import { EuiButton, EuiContextMenu } from "@elastic/eui";
import SimplePopover from "../../../../components/SimplePopover";
import ClearCacheModal from "../../../../containers/ClearCacheModal";
import FlushIndexModal from "../../../../containers/FlushIndexModal";
import DeleteIndexModal from "../DeleteDataStreamsModal";
import { ROUTES, INDEX_OP_TARGET_TYPE } from "../../../../utils/constants";
import RefreshActionModal from "../../../../containers/RefreshAction";
import { DataStream } from "../../../../../server/models/interfaces";

export interface DataStreamsActionsProps {
  selectedItems: DataStream[];
  onDelete: () => void;
  history: RouteComponentProps["history"];
}

export default function DataStreamsActions(props: DataStreamsActionsProps) {
  const { selectedItems, onDelete, history } = props;
  const [deleteIndexModalVisible, setDeleteIndexModalVisible] = useState(false);
  const [clearCacheModalVisible, setClearCacheModalVisible] = useState(false);
  const [flushDataStreamModalVisible, setFlushDataStreamModalVisible] = useState(false);
  const [refreshModalVisible, setRefreshModalVisible] = useState(false);

  const onDeleteIndexModalClose = () => {
    setDeleteIndexModalVisible(false);
  };

  const onClearCacheModalClose = () => {
    setClearCacheModalVisible(false);
  };

  const onFlushDataStreamModalClose = () => {
    setFlushDataStreamModalVisible(false);
  };

  const onRefreshModalClose = () => {
    setRefreshModalVisible(false);
  };

  const renderKey = useMemo(() => Date.now(), [selectedItems]);
  const selectedItemsInString = selectedItems.map((item) => item.name);

  return (
    <>
      <SimplePopover
        data-test-subj="moreAction"
        panelPaddingSize="none"
        button={
          <EuiButton iconType="arrowDown" iconSide="right">
            Actions
          </EuiButton>
        }
      >
        <EuiContextMenu
          initialPanelId={0}
          // The EuiContextMenu has bug when testing in jest
          // the props change won't make it rerender
          key={renderKey}
          panels={[
            {
              id: 0,
              items: [
                {
                  name: "Force merge",
                  "data-test-subj": "ForceMergeAction",
                  onClick: () => {
                    props.history.push(`${ROUTES.FORCE_MERGE}/${selectedItemsInString.join(",")}`);
                  },
                },
                {
                  name: "Roll over",
                  disabled: selectedItems.length > 1,
                  "data-test-subj": "rolloverAction",
                  onClick: () => history.push(`${ROUTES.ROLLOVER}/${selectedItemsInString.join(",")}`),
                },
                {
                  isSeparator: true,
                },
                {
                  name: "Clear cache",
                  disabled: selectedItems.length < 1,
                  "data-test-subj": "ClearCacheAction",
                  onClick: () => setClearCacheModalVisible(true),
                },
                {
                  name: "Flush",
                  disabled: !selectedItems.length,
                  "data-test-subj": "Flush Action",
                  onClick: () => setFlushDataStreamModalVisible(true),
                },
                {
                  name: "Refresh",
                  disabled: !selectedItems.length,
                  "data-test-subj": "refreshAction",
                  onClick: () => setRefreshModalVisible(true),
                },
                {
                  isSeparator: true,
                },
                {
                  name: "Delete",
                  disabled: selectedItems.length < 1,
                  "data-test-subj": "deleteAction",
                  onClick: () => setDeleteIndexModalVisible(true),
                },
              ],
            },
          ]}
        />
      </SimplePopover>
      <DeleteIndexModal
        selectedItems={selectedItemsInString}
        visible={deleteIndexModalVisible}
        onClose={onDeleteIndexModalClose}
        onDelete={() => {
          onDeleteIndexModalClose();
          onDelete();
        }}
      />
      <ClearCacheModal
        selectedItems={selectedItems}
        visible={clearCacheModalVisible}
        onClose={onClearCacheModalClose}
        type={INDEX_OP_TARGET_TYPE.DATA_STREAM}
      />
      <FlushIndexModal
        selectedItems={selectedItems}
        visible={flushDataStreamModalVisible}
        onClose={onFlushDataStreamModalClose}
        flushTarget={INDEX_OP_TARGET_TYPE.DATA_STREAM}
      />
      <RefreshActionModal
        selectedItems={selectedItems}
        visible={refreshModalVisible}
        onClose={onRefreshModalClose}
        type={INDEX_OP_TARGET_TYPE.DATA_STREAM}
      />
    </>
  );
}