<template>
  <div
    v-if="size > 0"
    :class="`image-grid__${images.length}`"
  >
    <div
      v-for="(image, index) in images"
      :key="index"
      :class="`image-grid__content-${index + 1}`"
    >
      <CustomSectionExampleImage
        :url="smallWindow ? image?.content?.lowResolutionDesktopImage : image?.content?.highResolutionDesktopImage"
        :text="image?.text?.value"
        :link="image?.link?.value"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useImageElementContent, useInputboxElementContent, useTextareaElementContent } from '@lightspeed/crane';
import CustomSectionExampleImage from './Image.vue';
import { Content } from '../../type.ts';

const imageText1 = useTextareaElementContent<Content>('image_text_1');
const imageText2 = useTextareaElementContent<Content>('image_text_2');
const imageText3 = useTextareaElementContent<Content>('image_text_3');
const imageText4 = useTextareaElementContent<Content>('image_text_4');
const imageContent1 = useImageElementContent<Content>('image_content_1');
const imageContent2 = useImageElementContent<Content>('image_content_2');
const imageContent3 = useImageElementContent<Content>('image_content_3');
const imageContent4 = useImageElementContent<Content>('image_content_4');
const imageLink1 = useInputboxElementContent<Content>('image_link_1');
const imageLink2 = useInputboxElementContent<Content>('image_link_2');
const imageLink3 = useInputboxElementContent<Content>('image_link_3');
const imageLink4 = useInputboxElementContent<Content>('image_link_4');
const images = computed(() => ([
  {
    text: imageText1,
    content: imageContent1,
    link: imageLink1,
  },
  {
    text: imageText2,
    content: imageContent2,
    link: imageLink2,
  },
  {
    text: imageText3,
    content: imageContent3,
    link: imageLink3,
  },
  {
    text: imageText4,
    content: imageContent4,
    link: imageLink4,
  },
].filter((image) => image.content.hasContent)));
const size = computed(() => images.value.length);

const windowWidth = ref(window.innerWidth);
const onWidthChange = () => { windowWidth.value = window.innerWidth; };
window.addEventListener('resize', onWidthChange);
const smallWindow = computed(() => windowWidth.value <= 768);
</script>

<style lang="scss" scoped>
@mixin image-grid {
  display: grid;
  grid-gap: 20px;
  @media screen and (min-width: 900px) {
    aspect-ratio: 1/0.55;
  }
}

.image-grid__1 {
  @include image-grid;

  & {
    grid-template-columns: [col1-start] 1fr [col1-end];
    grid-template-rows: [row1-start] 1fr [row1-end];
  }

  @media screen and (max-width: 900px) {
    aspect-ratio: 1;
  }

  .image-grid__content-1 {
    grid-column: col1-start / col1-end;
    grid-row: row1-start / row1-end;
  }
}

.image-grid__2 {
  @include image-grid;

  & {
    grid-template-columns: [col1-start] 11fr  [col2-start] 9fr [col2-end];
    grid-template-rows: [row1-start] 4.5fr [row2-start] 2.75fr [row2-end];
  }

  @media screen and (max-width: 900px) {
    aspect-ratio: 4.5/7.25;
  }

  .image-grid__content-1 {
    @media screen and (min-width: 900px) {
      grid-column: col1-start / col2-start;
      grid-row: row1-start / row2-end;
    }

    @media screen and (max-width: 900px) {
      grid-column: col1-start / col2-end;
      grid-row: row1-start / row2-start;
    }
  }

  .image-grid__content-2 {
    @media screen and (min-width: 900px) {
      grid-column: col2-start / col2-end;
      grid-row: row1-start / row2-end;
    }

    @media screen and (max-width: 900px) {
      grid-column: col1-start / col2-end;
      grid-row: row2-start / row2-end;
    }
  }
}

.image-grid__3 {
  @include image-grid;

  & {
    grid-template-columns: [col1-start] 11fr  [col2-start] 9fr [col2-end];
    grid-template-rows: [row1-start] 4.5fr [row2-start] 0.5fr [row3-start] 2.25fr [row4-start] 2.75fr [row4-end];
  }

  @media screen and (max-width: 900px) {
    aspect-ratio: 0.45;
  }

  .image-grid__content-1 {
    @media screen and (min-width: 900px) {
      grid-column: col1-start / col2-start;
      grid-row: row1-start / row4-end;
    }

    @media screen and (max-width: 900px) {
      grid-column: col1-start / col2-end;
      grid-row: row1-start / row2-start;
    }
  }

  .image-grid__content-2 {
    @media screen and (min-width: 900px) {
      grid-column: col2-start / col2-end;
      grid-row: row1-start / row3-start;
    }

    @media screen and (max-width: 900px) {
      grid-column: col1-start / col2-end;
      grid-row: row2-start / row4-start;
    }
  }

  .image-grid__content-3 {
    @media screen and (min-width: 900px) {
      grid-column: col2-start / col2-end;
      grid-row: row3-start / row4-end;
    }

    @media screen and (max-width: 900px) {
      grid-column: col1-start / col2-end;
      grid-row: row4-start / row4-end;
    }
  }
}

.image-grid__4 {
  @include image-grid;

  @media screen and (min-width: 900px) {
    grid-template-columns: [col1-start] 11fr [col2-start] 4.5fr [col3-start] 4.5fr [col3-end];
    grid-template-rows: [row1-start] 1fr [row2-start] 1fr [row2-end];
    aspect-ratio: 1/0.55;
  }

  @media screen and (max-width: 900px) {
    grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col2-end];
    grid-template-rows: [row1-start] 4.5fr [row2-start] 2.75fr [row3-start] 2.75fr [row3-end];
    aspect-ratio: 0.45;
  }

  .image-grid__content-1 {
    @media screen and (min-width: 900px) {
      grid-column: col1-start / col2-start;
      grid-row: row1-start / row2-end;
    }

    @media screen and (max-width: 900px) {
      grid-column: col1-start / col2-end;
      grid-row: row1-start / row2-start;
    }
  }

  .image-grid__content-2 {
    @media screen and (min-width: 900px) {
      grid-column: col2-start / col3-end;
      grid-row: row1-start / row2-start;
    }

    @media screen and (max-width: 900px) {
      grid-column: col1-start / col2-end;
      grid-row: row2-start / row3-start;
    }
  }

  .image-grid__content-3 {
    @media screen and (min-width: 900px) {
      grid-column: col2-start / col3-start;
      grid-row: row2-start / row2-end;
    }

    @media screen and (max-width: 900px) {
      grid-column: col1-start / col2-start;
      grid-row: row3-start / row3-end;
    }
  }

  .image-grid__content-4 {
    @media screen and (min-width: 900px) {
      grid-column: col3-start / col3-end;
      grid-row: row2-start / row2-end;
    }

    @media screen and (max-width: 900px) {
      grid-column: col2-start / col2-end;
      grid-row: row3-start / row3-end;
    }
  }
}
</style>
