export const drapcodeCarouselRef = "drapcode-carousel";
export const drapcodeCarouselPluginRef = "gjs-drapcode-carousel";
import randomId from "random-id";
const customId = "dc-carousel-" + randomId(8, "");

// Carousel Block View
const carouselGalleryView01 = `
<div class="dc-sview sContainer">
    <span span="12" class="dc-scview dc-carousel-s12">
    <img class="d-block img-fluid" style="height:100px; width: 220px" src="https://public-webconnect.s3.amazonaws.com/static/image/Carousel-001.gif" alt="Carousel 001">
    </span>
</div>`;
const carouselGalleryView02 = `
<div class="dc-sview sContainer">
    <span span="12" class="dc-scview dc-carousel-s12">
    <img class="d-block img-fluid" style="height:100px; width: 220px" src="https://public-webconnect.s3.amazonaws.com/static/image/Carousel-002-1.gif" alt="Carousel 002">
    </span>
</div>`;
const carouselGalleryView03 = `
<div class="dc-sview sContainer">
    <span span="12" class="dc-scview dc-carousel-s12">
    <img class="d-block img-fluid" style="height:100px; width: 220px" src="https://public-webconnect.s3.amazonaws.com/static/image/Carousel-003.gif" alt="Carousel 003">
    </span>
</div>`;
const carouselGalleryView04 = `
<div class="dc-sview sContainer">
    <span span="12" class="dc-scview dc-carousel-s12">
    <img class="d-block img-fluid" style="height:100px; width: 220px" src="https://public-webconnect.s3.amazonaws.com/static/image/Carousel-004.gif" alt="Carousel 004">
    </span>
</div>`;
const carouselGalleryView05 = `
<div class="dc-sview sContainer">
    <span span="12" class="dc-scview dc-carousel-s12">
    <img class="d-block img-fluid" style="height:100px; width: 220px" src="https://public-webconnect.s3.amazonaws.com/static/image/Carousel-005.gif" alt="Carousel 005">
    </span>
</div>`;
const carouselGalleryView06 = `
<div class="dc-sview sContainer">
    <span span="12" class="dc-scview dc-carousel-s12">
    <img class="d-block img-fluid" style="height:100px; width: 220px" src="https://public-webconnect.s3.amazonaws.com/static/image/Carousel-006-1.gif" alt="Carousel 006">
    </span>
</div>`;

// Carousel  Block Code
const carousel01 = `<div id="${customId}" class="carousel slide" data-ride="carousel" data-gjs-type="carousel-container" data-gjs-custom-name="Carousel" data-pause="hover" data-interval="5000">
<div class="carousel-inner" data-gjs-type="carousel-inner" data-gjs-custom-name="Carousel Container">
  <div class="carousel-item active" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
    <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="First slide">
  </div>
  <div class="carousel-item" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
    <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="Second slide">
  </div>
  <div class="carousel-item" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
    <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="Third slide">
  </div>
</div>
</div>`;
const carousel02 = `<div id="${customId}" class="carousel slide" data-ride="carousel" data-gjs-type="carousel-container" data-gjs-custom-name="Carousel" data-pause="hover" data-interval="5000">
<div class="carousel-inner" data-gjs-type="carousel-inner" data-gjs-custom-name="Carousel Container">
  <div class="carousel-item active" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
    <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="First slide">
  </div>
  <div class="carousel-item" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
    <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="Second slide">
  </div>
  <div class="carousel-item" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
    <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="Third slide">
  </div>
</div>
<a class="carousel-control-prev" href="#${customId}" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true" data-gjs-type="carousel-control-prev-icon" data-gjs-custom-name="Prev"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#${customId}" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true" data-gjs-type="carousel-control-next-icon" data-gjs-custom-name="Next"></span>
  <span class="sr-only">Next</span>
</a>
</div>`;
const carousel03 = `<div id="${customId}" class="carousel slide" data-ride="carousel" data-gjs-type="carousel-container" data-gjs-custom-name="Carousel" data-pause="hover" data-interval="5000">
<ol class="carousel-indicators" data-gjs-type="carousel-indicators" data-gjs-custom-name="Carousel Indicators">
  <li data-target="#${customId}" data-slide-to="0" class="active" data-gjs-type="carousel-list-item"></li>
  <li data-target="#${customId}" data-slide-to="1" data-gjs-type="carousel-list-item"></li>
  <li data-target="#${customId}" data-slide-to="2" data-gjs-type="carousel-list-item"></li>
</ol>
<div class="carousel-inner" data-gjs-type="carousel-inner" data-gjs-custom-name="Carousel Container">
  <div class="carousel-item active" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
    <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="First slide">
  </div>
  <div class="carousel-item" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
    <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="Second slide">
  </div>
  <div class="carousel-item" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
    <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="Third slide">
  </div>
</div>
<a class="carousel-control-prev" href="#${customId}" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true" data-gjs-type="carousel-control-prev-icon" data-gjs-custom-name="Prev"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#${customId}" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true" data-gjs-type="carousel-control-next-icon" data-gjs-custom-name="Next"></span>
  <span class="sr-only">Next</span>
</a>
</div>`;
const carousel04 = `<div id="${customId}" class="carousel slide" data-ride="carousel" data-gjs-type="carousel-container" data-gjs-custom-name="Carousel" data-pause="hover" data-interval="5000">
<div class="carousel-inner" data-gjs-type="carousel-inner" data-gjs-custom-name="Carousel Container">
  <div class="carousel-item active" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
    <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="First slide">
    <div class="carousel-caption d-none d-md-block" data-gjs-type="carousel-caption" data-gjs-custom-name="Carousel Caption">
      <h5>First Slide Label</h5>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </div>
  <div class="carousel-item" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
    <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="Second slide">
    <div class="carousel-caption d-none d-md-block" data-gjs-type="carousel-caption" data-gjs-custom-name="Carousel Caption">
      <h5>Second Slide Label</h5>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </div>
  <div class="carousel-item" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
    <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="Third slide">
    <div class="carousel-caption d-none d-md-block" data-gjs-type="carousel-caption" data-gjs-custom-name="Carousel Caption">
      <h5>Third Slide Label</h5>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </div>
</div>
</div>`;
const carousel05 = `<div id="${customId}" class="carousel slide" data-ride="carousel" data-gjs-type="carousel-container" data-gjs-custom-name="Carousel" data-pause="hover" data-interval="5000">
<div class="carousel-inner" data-gjs-type="carousel-inner" data-gjs-custom-name="Carousel Container">
  <div class="carousel-item active" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
    <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="First slide">
    <div class="carousel-caption d-none d-md-block" data-gjs-type="carousel-caption" data-gjs-custom-name="Carousel Caption">
      <h5>First Slide Label</h5>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </div>
  <div class="carousel-item" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
    <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="Second slide">
    <div class="carousel-caption d-none d-md-block" data-gjs-type="carousel-caption" data-gjs-custom-name="Carousel Caption">
      <h5>Second Slide Label</h5>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </div>
  <div class="carousel-item" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
    <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="Third slide">
    <div class="carousel-caption d-none d-md-block" data-gjs-type="carousel-caption" data-gjs-custom-name="Carousel Caption">
      <h5>Third Slide Label</h5>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </div>
</div>
<a class="carousel-control-prev" href="#${customId}" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true" data-gjs-type="carousel-control-prev-icon" data-gjs-custom-name="Prev"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#${customId}" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true" data-gjs-type="carousel-control-next-icon" data-gjs-custom-name="Next"></span>
  <span class="sr-only">Next</span>
</a>
</div>`;
const carousel06 = `<div id="${customId}" class="carousel slide" data-ride="carousel" data-gjs-type="carousel-container" data-gjs-custom-name="Carousel" data-pause="hover" data-interval="5000">
<ol class="carousel-indicators" data-gjs-type="carousel-indicators" data-gjs-custom-name="Carousel Indicators">
  <li data-target="#${customId}" data-slide-to="0" class="active" data-gjs-type="carousel-list-item"></li>
  <li data-target="#${customId}" data-slide-to="1" data-gjs-type="carousel-list-item"></li>
  <li data-target="#${customId}" data-slide-to="2" data-gjs-type="carousel-list-item"></li>
</ol>
<div class="carousel-inner" data-gjs-type="carousel-inner" data-gjs-custom-name="Carousel Container">
  <div class="carousel-item active" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
    <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="First slide">
    <div class="carousel-caption d-none d-md-block" data-gjs-type="carousel-caption" data-gjs-custom-name="Carousel Caption">
      <h5>First Slide Label</h5>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </div>
  <div class="carousel-item" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
    <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="Second slide">
    <div class="carousel-caption d-none d-md-block" data-gjs-type="carousel-caption" data-gjs-custom-name="Carousel Caption">
      <h5>Second Slide Label</h5>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </div>
  <div class="carousel-item" data-gjs-type="carousel-item" data-gjs-custom-name="Carousel Item">
    <img class="d-block img-fluid" data-gjs-type="bs-image" style="width: 100%" src="https://picsum.photos/1250/400" alt="Third slide">
    <div class="carousel-caption d-none d-md-block" data-gjs-type="carousel-caption" data-gjs-custom-name="Carousel Caption">
      <h5>Third Slide Label</h5>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </div>
</div>
<a class="carousel-control-prev" href="#${customId}" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true" data-gjs-type="carousel-control-prev-icon" data-gjs-custom-name="Prev"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#${customId}" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true" data-gjs-type="carousel-control-next-icon" data-gjs-custom-name="Next"></span>
  <span class="sr-only">Next</span>
</a>
</div>`;

export const defaultCarouselsMap = [
  {
    label: "Carousel 001",
    value: "carousel01",
    view: carouselGalleryView01,
    code: carousel01,
  },
  {
    label: "Carousel 002",
    value: "carousel02",
    view: carouselGalleryView02,
    code: carousel02,
  },
  {
    label: "Carousel 003",
    value: "carousel03",
    view: carouselGalleryView03,
    code: carousel03,
  },
  {
    label: "Carousel 004",
    value: "carousel04",
    view: carouselGalleryView04,
    code: carousel04,
  },
  {
    label: "Carousel 005",
    value: "carousel05",
    view: carouselGalleryView05,
    code: carousel05,
  },
  {
    label: "Carousel 006",
    value: "carousel06",
    view: carouselGalleryView06,
    code: carousel06,
  },
];
