<template>
  <ActionRail
    :actions="viewActions"
    :menu-props="menuProps"
    :menu-on="menuOn"
    :menu-activator-props="menuActivatorProps"
  >
    <template #visible="{ action }">
      <Component
        v-bind="action.props"
        :is="action.component"
        :view="view"
        variant="button"
        @update:modal="onActionModal"
      />
    </template>
    <template #hidden="{ action }">
      <Component
        v-bind="action.props"
        :is="action.component"
        :view="view"
        variant="menu-item"
        @update:modal="onActionModal"
      />
    </template>
  </ActionRail>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { ScanView } from '@3cr/types-ts';
import FlipVerticalAction from '@/components/modal/actions/FlipVerticalAction.vue';
import FlipHorizontalAction from '@/components/modal/actions/FlipHorizontalAction.vue';
import FullscreenAction from '@/components/modal/actions/FullscreenAction.vue';
import PanAction from '@/components/modal/actions/PanAction.vue';
import ResetViewAction from '@/components/modal/actions/ResetViewAction.vue';
import Rotate2dAction from '@/components/modal/actions/Rotate2dAction.vue';
import Slice3dAction from '@/components/modal/actions/Slice3dAction.vue';
import ZoomAction from '@/components/modal/actions/ZoomAction.vue';
import LengthAction from '@/components/modal/actions/LengthAction.vue';

interface Props {
  view: ScanView;
  target?: EventTarget;
}

type Emits = {
  modal: [boolean];
};

type ActionItem = {
  component: any;
  width: number;
  condition: boolean;
  props: Record<string, any>;
};

const props = defineProps<Props>();

const emit = defineEmits<Emits>();

const menuProps = computed(() => ({
  closeOnContentClick: false,
}));

const menuOn = computed(() => ({
  'update:modelValue': onActionModal,
}));

const menuActivatorProps = computed(() => ({
  icon: 'more_vert',
  variant: 'text',
  color: 'white',
}));

const viewActions = computed(() => {
  return actions.value.filter((action) => action.condition);
});

const actions = computed<ActionItem[]>(() => [
  {
    component: FullscreenAction,
    width: 52,
    condition: true,
    props: {},
  },
  {
    component: ResetViewAction,
    width: 52,
    condition: true,
    props: {},
  },
  {
    component: PanAction,
    width: 52,
    condition: true,
    props: {},
  },
  {
    component: ZoomAction,
    width: 52,
    condition: true,
    props: {
      target: props.target,
    },
  },
  {
    component: Slice3dAction,
    width: 52,
    condition: props.view === ScanView.Volume,
    props: {},
  },
  {
    component: LengthAction,
    width: 52,
    condition: props.view !== ScanView.Volume,
    props: {},
  },
  {
    component: Rotate2dAction,
    width: 52,
    condition: props.view !== ScanView.Volume,
    props: {},
  },
  {
    component: FlipHorizontalAction,
    width: 52,
    condition: props.view !== ScanView.Volume,
    props: {},
  },
  {
    component: FlipVerticalAction,
    width: 52,
    condition: props.view !== ScanView.Volume,
    props: {},
  },
]);

async function onActionModal(value: boolean): Promise<void> {
  emit('modal', value);
}
</script>
