<template>
  <v-card
    color="background"
    density="compact"
    flat
    tile
  >
    <DrawerTitle :title="t('labels.display')" />
    <v-card-text class="px-2">
      <v-row
        class="flex-column"
        no-gutters
      >
        <v-row
          id="density"
          no-gutters
        >
          <v-col>
            <DoubleSliderSelector
              v-bind="huMinMax"
              v-model="windowSlider"
              :label="t('labels.density')"
            />
          </v-col>
        </v-row>
        <v-row
          no-gutters
          class="pt-4 pb-6"
        >
          <v-col>
            <DoubleSliderSelector
              v-bind="huMinMax"
              v-model="thresholdSlider"
              :label="t('labels.fineAdjustment')"
            />
          </v-col>
        </v-row>
        <v-divider class="pb-6" />
        <v-row no-gutters>
          <v-col>
            <sh-select
              data-testid="greyscale"
              :model-value="currentGreyscalePreset"
              :items="initialScanState.GreyscalePresets"
              :label="t('fields.density.label')"
              :clearable="false"
              density="compact"
              variant="outlined"
              persistent-placeholder
              hide-details
              return-object
              :placeholder="t('fields.density.placeholder')"
              @update:model-value="onGreyscalePresetChange"
            >
              <template #item="{ props, item }">
                <v-list-item
                  v-bind="props"
                  :title="getGreyscaleI18n(item.raw.Name)"
                  lines="three"
                >
                  <template #subtitle>
                    <span>{{ t('labels.lowDensity') + ': ' }}</span>
                    <span class="text-mono">{{ item.raw.Lower }} </span>
                    <v-spacer />
                    <span>{{ t('labels.highDensity') + ': ' }}</span>
                    <span class="text-mono">{{ item.raw.Upper }}</span>
                  </template>
                </v-list-item>
              </template>
              <template #selection="{ item }">
                <span>{{ getGreyscaleI18n(item.raw.Name) }}</span>
              </template>
            </sh-select>
          </v-col>
        </v-row>
        <v-row
          class="pt-6"
          no-gutters
        >
          <v-col>
            <sh-select
              data-testid="colour"
              :model-value="currentColourPreset"
              :items="initialScanState.ColourPresets"
              :label="t('fields.colour.label')"
              variant="outlined"
              density="compact"
              hide-details
              :placeholder="t('fields.colour.placeholder')"
              return-object
              @update:model-value="onColourPresetChange"
            >
              <template #item="{ props, item }">
                <v-list-item
                  v-bind="props"
                  :title="getColourI18n(item.raw.Name)"
                />
              </template>
              <template #selection="{ item }">
                <span>{{ getColourI18n(item.raw.Name) }}</span>
              </template>
            </sh-select>
          </v-col>
        </v-row>
      </v-row>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
import {
  currentColourPreset,
  currentGreyscalePreset,
  huMinMax,
  initialScanState,
  thresholdSlider,
  windowSlider,
} from '@/models/scanState';
import {
  ColourPresetData,
  GreyscalePresetData,
  PresetsActions,
} from '@3cr/types-ts';
import { useViewer3cr } from '@/composables/useViewer3cr';
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';

const { t } = useI18n();
const viewer3cr = useViewer3cr();

const greyscaleI18n = computed(
  () =>
    new Map<string, string>([
      ['Bone', t('labels.bone')],
      ['Brain', t('labels.brain')],
      ['Liver', t('labels.liver')],
      ['Lungs', t('labels.lungs')],
      ['Muscle', t('labels.muscle')],
      ['Skin', t('labels.skin')],
      ['Soft Tissue', t('labels.softTissue')],
      ['Temporal Bones', t('labels.temporalBones')],
    ]),
);

const colourI18n = computed(
  () =>
    new Map<string, string>([
      ['None', t('labels.none')],
      ['B&W', t('labels.blackAndWhite')],
      ['CT Colour', t('labels.ctColour')],
      ['Rainbow', t('labels.rainbow')],
      ['Inverse', t('labels.inverse')],
    ]),
);

function getGreyscaleI18n(name: string): string {
  return greyscaleI18n.value.get(name) ?? name;
}

function getColourI18n(name: string): string {
  return colourI18n.value.get(name) ?? name;
}

async function onGreyscalePresetChange(
  preset: GreyscalePresetData,
): Promise<void> {
  await viewer3cr.setPreset(PresetsActions.pr01, preset);
}

async function onColourPresetChange(
  preset: ColourPresetData | null,
): Promise<void> {
  if (preset !== null) {
    await viewer3cr.setPreset(PresetsActions.pr02, preset);
  } else {
    const defaultPreset = initialScanState.value.ColourPresets.find(
      (x) => x.Name === 'None',
    );
    if (defaultPreset) {
      await viewer3cr.setPreset(PresetsActions.pr02, defaultPreset);
    }
  }
}
</script>

<style scoped lang="scss">
:deep(.text-caption) {
  font-weight: 600;
}

:deep(.v-card-title) {
  font-weight: 600;
}

:deep(.v-field-label) {
  padding-bottom: 20px;
}
</style>
