import {
  useButtonElementContent, useButtonElementDesign,
  useImageElementContent,
  useImageElementDesign,
  useInputboxElementContent,
  useTextElementDesign,
} from '@lightspeed/crane';
import { computed } from 'vue';

import type { Content, Design } from '../type.ts';

export const useVisibilityProvider = () => {
  const titleContent = useInputboxElementContent<Content>('title');
  const titleDesign = useTextElementDesign<Design>('title');
  const imageContent = useImageElementContent<Content>('image');
  const imageDesign = useImageElementDesign<Design>('image');
  const buttonContent = useButtonElementContent<Content>('button');
  const buttonDesign = useButtonElementDesign<Design>('button');

  return {
    isTitleVisible: computed(() => titleDesign.visible && titleContent.hasContent),
    isImageVisible: computed(() => imageDesign.visible && imageContent.hasContent),
    isButtonVisible: computed(() => buttonDesign.visible && buttonContent.hasTitle),
  };
};

export default {};
