import { computed } from 'vue';
import {
  EditorTypes,
  ImageContent,
  TextAreaContent,
  useDeckElementContent,
  useTextElementDesign,
} from '@lightspeed/crane';
import { Content, Design } from '../type.ts';

export type Highlight = {
  text?: TextAreaContent;
  image?: ImageContent;
  design: TextDesignData;
}

export function useHighlightedTextElementList() {
  const design = computed<TextDesignData[]>(() => [
    useTextElementDesign<Design>('highlighted_text_1') as TextDesignData,
    useTextElementDesign<Design>('highlighted_text_2') as TextDesignData,
    useTextElementDesign<Design>('highlighted_text_3') as TextDesignData,
  ]);
  const content = useDeckElementContent<Content>('highlighted_text');

  const highlightedTextElements = computed<Highlight[]>(() => content.cards?.map((card, index) => ({
    text: content.getReactiveRef(card, EditorTypes.INPUTBOX, 'text') as unknown as TextAreaContent | undefined,
    image: content.getReactiveRef(card, EditorTypes.IMAGE, 'image_content') as ImageContent,
    design: design.value[index],
  })) ?? []);

  return {
    highlightedTextElements,
  };
}
