<template>
  <template v-if="state.fest">
    <sl-tooltip :content="state.fest.message">
      <div style="display: inline-block" @mouseover="state.play = true" @mouseleave="state.play = false">
        <template v-if="state.fest">
          <sl-animation :name="state.fest.effect" easing="ease-in-out" :duration="1000" :play="state.play">
            <div style="display: inline-block">
              <div style="" v-html="state.fest.svg"></div>
            </div>
          </sl-animation>
        </template>
      </div>
    </sl-tooltip>
  </template>
</template>

<script setup>
import { reactive, computed } from "vue"
const dates = [
  {
    start: new Date(new Date().getFullYear(), 9, 31),
    end: new Date(new Date().getFullYear(), 9, 31, 23, 59, 59),
    name: "Halloween",
    message: "Happy Halloween!",
    effect: "jello",
    svg: '<svg  xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 1.999l.041 .002l.208 .003a8 8 0 0 1 7.747 7.747l.003 .248l.177 .006a3 3 0 0 1 2.819 2.819l.005 .176a3 3 0 0 1 -3 3l-.001 1.696l1.833 2.75a1 1 0 0 1 -.72 1.548l-.112 .006h-10c-3.445 .002 -6.327 -2.49 -6.901 -5.824l-.028 -.178l-.071 .001a3 3 0 0 1 -2.995 -2.824l-.005 -.175a3 3 0 0 1 3 -3l.004 -.25a8 8 0 0 1 7.996 -7.75zm0 10.001a2 2 0 0 0 -2 2a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1a2 2 0 0 0 -2 -2zm-1.99 -4l-.127 .007a1 1 0 0 0 .117 1.993l.127 -.007a1 1 0 0 0 -.117 -1.993zm4 0l-.127 .007a1 1 0 0 0 .117 1.993l.127 -.007a1 1 0 0 0 -.117 -1.993z" /></svg>',
  },
  {
    start: new Date(new Date().getFullYear(), 11, 6),
    end: new Date(new Date().getFullYear(), 11, 6, 23, 59, 59),
    name: "Nikolaus",
    message: "Nikolaus",
    effect: "swing",
    svg: '<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512" fill="currentColor"><g><path  d="M460.566,358.661c-2.95-26.172-13.179-49.828-22.694-71.723c-5.663-12.898-11.13-25.229-15.068-36.937		c-3.963-11.717-6.361-22.737-6.352-33.136c0.018-8.996,1.7-17.566,5.944-26.555c4.252-8.97,11.199-18.426,22.218-28.484		l-2.219-2.432c0.23,0,0.442,0.034,0.672,0.034c38.076-0.009,68.926-30.858,68.933-68.925		c-0.008-38.077-30.848-68.926-68.933-68.934c-31.589,0.008-58.127,21.258-66.29,50.236l-1.93-2.815		c-10.008,6.896-22.337,12.066-36.537,16.377c-21.283,6.505-46.58,11.003-73.279,17.856c-26.691,6.879-54.887,16.215-81.816,33.009		c-37.107,23.154-71.757,53.016-97.648,91.126c-24.592,36.155-40.925,79.928-43.824,131.252C17.78,364.561,0.009,386.143,0,411.94		v23.469c0.009,30.39,24.624,55.014,55.024,55.023h392.065c30.398-0.009,55.014-24.633,55.023-55.023V411.94		C502.103,386.211,484.434,364.681,460.566,358.661z M412.796,60.222c7.788-7.764,18.409-12.525,30.271-12.533		c11.87,0.008,22.49,4.77,30.279,12.533c7.763,7.788,12.525,18.417,12.533,30.28c-0.008,11.862-4.77,22.482-12.533,30.262		c-7.789,7.772-18.41,12.534-30.279,12.542c-11.862-0.009-22.482-4.771-30.271-12.534c-7.763-7.788-12.525-18.408-12.534-30.27		C400.271,78.639,405.033,68.011,412.796,60.222z M475.99,435.409c-0.025,15.96-12.941,28.876-28.901,28.901H55.024		c-15.961-0.025-28.877-12.941-28.902-28.901V411.94c0.025-15.951,12.942-28.867,28.902-28.893h392.065		c15.96,0.026,28.876,12.942,28.901,28.893V435.409z"/></g></svg>',
  },
  {
    start: new Date(new Date().getFullYear(), 11, 24),
    end: new Date(new Date().getFullYear(), 11, 26, 23, 59, 59),
    name: "Weihnachten",
    message: "Frohe Weihnachten!",
    effect: "wobble",
    svg: '<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><g>	<path d="M225.161,66.903L220.05,96.73c-0.411,2.37,0.566,4.765,2.513,6.174c1.946,1.418,4.528,1.604,6.658,0.488		l26.78-14.083l26.777,14.083c2.13,1.116,4.712,0.929,6.662-0.488c1.942-1.409,2.92-3.804,2.509-6.174l-5.111-29.827l21.666-21.111		c1.722-1.686,2.337-4.203,1.601-6.484c-0.746-2.288-2.725-3.958-5.104-4.309l-29.945-4.349l-13.39-27.131		C260.6,1.369,258.405,0,256.002,0c-2.406,0-4.602,1.369-5.668,3.519l-13.39,27.131l-29.945,4.349		c-2.378,0.35-4.358,2.02-5.103,4.309c-0.737,2.281-0.122,4.798,1.6,6.484L225.161,66.903z"/>	<path class="st0" d="M357.618,337.625c43.983-19.385,54.604-53.977,54.604-91.354c-24.272,6.924-68.246,13.846-97.072-13.838		c34.886-15.223,56.12-41.523,54.604-62.276c-53.084,6.924-74.314-1.376-113.756-62.284c-39.43,60.908-60.668,69.208-113.752,62.284		c-1.52,20.754,19.718,47.054,54.604,62.276c-28.826,27.684-72.8,20.762-97.08,13.838c0,37.377,10.625,71.969,54.604,91.354		c-43.979,15.215-89.48,0-89.48,0S81.02,441.514,210.501,457.51V512h47.004h47.021v-54.929		c126.654-17.252,142.582-119.446,142.582-119.446S401.601,352.84,357.618,337.625z M142.091,286.369		c0-7.672,6.223-13.895,13.899-13.895c7.677,0,13.9,6.223,13.9,13.895c0,7.681-6.223,13.904-13.9,13.904		C148.313,300.272,142.091,294.05,142.091,286.369z M175.448,411.826c-9.403,0-17.023-7.616-17.023-17.031		c0-9.4,7.62-17.023,17.023-17.023c9.408,0,17.027,7.623,17.027,17.023C192.475,404.21,184.856,411.826,175.448,411.826z		 M222.713,322.516c-9.212,0-16.681-7.469-16.681-16.681s7.469-16.681,16.681-16.681c9.212,0,16.681,7.469,16.681,16.681		S231.925,322.516,222.713,322.516z M239.106,196.025c0-10.141,8.222-18.359,18.354-18.359c10.137,0,18.354,8.218,18.354,18.359		c0,10.124-8.218,18.358-18.354,18.358C247.328,214.383,239.106,206.149,239.106,196.025z M253.909,361.449		c0-8.112,6.572-14.686,14.681-14.686c8.109,0,14.682,6.573,14.682,14.686c0,8.104-6.573,14.677-14.682,14.677		C260.481,376.126,253.909,369.553,253.909,361.449z M292.218,444.845c-7.676,0-13.899-6.223-13.899-13.903		c0-7.672,6.223-13.895,13.899-13.895c7.677,0,13.9,6.223,13.9,13.895C306.118,438.622,299.895,444.845,292.218,444.845z		 M328.362,294.718c-7.677,0-13.9-6.223-13.9-13.904c0-7.672,6.223-13.895,13.9-13.895c7.676,0,13.899,6.223,13.899,13.895		C342.261,288.495,336.038,294.718,328.362,294.718z M372.845,394.803c-7.677,0-13.9-6.223-13.9-13.904		c0-7.672,6.223-13.895,13.9-13.895c7.676,0,13.899,6.223,13.899,13.895C386.745,388.58,380.522,394.803,372.845,394.803z"/></g></svg>',
  },
  {
    start: new Date(new Date().getFullYear(), 11, 31),
    end: new Date(new Date().getFullYear(), 11, 31, 23, 59, 59),
    name: "Sylvester",
    message: "Sylvester",
    effect: "rubberBand",
    svg: '<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg"	 viewBox="0 0 512 512" fill="currentColor"><g>	<g>		<path d="M495.299,0H259.114c-14.858,0-22.295,18.021-11.807,28.507l35.431,35.43C282.73,63.945,4.893,341.784,4.893,341.784			c-6.523,6.523-6.523,17.097,0,23.615c6.523,6.523,17.091,6.524,23.615,0l65.287-65.288c0,0.001,0.001,0.002,0.001,0.002			l23.62,23.62l-11.81,11.81c-34.205,34.211-36.554,81.533-5.567,112.52c6.523,6.523,17.091,6.524,23.615,0			c6.523-6.518,6.523-17.092,0-23.615c-20.625-20.625-12.058-47.655,5.567-65.29l11.81-11.81l70.854,70.854			c11.98,11.991,33.348,13.893,47.231,0l188.946-188.946l35.431,35.43c10.443,10.443,28.507,3.145,28.507-11.807V16.7			C511.999,7.475,504.519,0,495.299,0z M242.807,387.316l-59.05-177.164l38.542-38.54l59.054,177.15L242.807,387.316z			 M378.607,251.49L332.76,113.96l91.683,91.683L378.607,251.49z"/>	</g></g><g>	<g>		<path d="M182.702,412.641c-6.524-6.523-17.092-6.523-23.615,0l-11.807,11.807c-6.523,6.518-6.523,17.097,0,23.615			c6.523,6.523,17.091,6.524,23.615,0l11.807-11.807C189.226,429.739,189.226,419.16,182.702,412.641z"/>	</g></g><g>	<g>		<path d="M123.654,471.684c-6.524-6.523-17.092-6.523-23.615,0l-11.807,11.807c-6.523,6.518-6.523,17.097,0,23.615			c6.523,6.523,17.091,6.524,23.615,0l11.807-11.807C130.177,488.782,130.177,478.203,123.654,471.684z"/>	</g></g><g>	<g>		<path d="M182.701,483.492l-11.807-11.807c-6.523-6.523-17.092-6.523-23.615,0c-6.523,6.518-6.523,17.097,0,23.615l11.807,11.807			c6.523,6.523,17.091,6.524,23.615,0C189.224,500.589,189.224,490.01,182.701,483.492z"/>	</g></g></svg>',
  },
  {
    start: new Date(new Date().getFullYear(), 0, 1),
    end: new Date(new Date().getFullYear(), 0, 1, 23, 59, 59),
    name: "Sylvester",
    message: "Frohes Neues Jahr!",
    effect: "rubberBand",
    svg: '<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg"	 viewBox="0 0 512 512" fill="currentColor"><g>	<g>		<path d="M495.299,0H259.114c-14.858,0-22.295,18.021-11.807,28.507l35.431,35.43C282.73,63.945,4.893,341.784,4.893,341.784			c-6.523,6.523-6.523,17.097,0,23.615c6.523,6.523,17.091,6.524,23.615,0l65.287-65.288c0,0.001,0.001,0.002,0.001,0.002			l23.62,23.62l-11.81,11.81c-34.205,34.211-36.554,81.533-5.567,112.52c6.523,6.523,17.091,6.524,23.615,0			c6.523-6.518,6.523-17.092,0-23.615c-20.625-20.625-12.058-47.655,5.567-65.29l11.81-11.81l70.854,70.854			c11.98,11.991,33.348,13.893,47.231,0l188.946-188.946l35.431,35.43c10.443,10.443,28.507,3.145,28.507-11.807V16.7			C511.999,7.475,504.519,0,495.299,0z M242.807,387.316l-59.05-177.164l38.542-38.54l59.054,177.15L242.807,387.316z			 M378.607,251.49L332.76,113.96l91.683,91.683L378.607,251.49z"/>	</g></g><g>	<g>		<path d="M182.702,412.641c-6.524-6.523-17.092-6.523-23.615,0l-11.807,11.807c-6.523,6.518-6.523,17.097,0,23.615			c6.523,6.523,17.091,6.524,23.615,0l11.807-11.807C189.226,429.739,189.226,419.16,182.702,412.641z"/>	</g></g><g>	<g>		<path d="M123.654,471.684c-6.524-6.523-17.092-6.523-23.615,0l-11.807,11.807c-6.523,6.518-6.523,17.097,0,23.615			c6.523,6.523,17.091,6.524,23.615,0l11.807-11.807C130.177,488.782,130.177,478.203,123.654,471.684z"/>	</g></g><g>	<g>		<path d="M182.701,483.492l-11.807-11.807c-6.523-6.523-17.092-6.523-23.615,0c-6.523,6.518-6.523,17.097,0,23.615l11.807,11.807			c6.523,6.523,17.091,6.524,23.615,0C189.224,500.589,189.224,490.01,182.701,483.492z"/>	</g></g></svg>',
  },
]

const state = reactive({
  fest: computed(() => {
    for (let d of dates) {
      if (d.start <= new Date() && d.end >= new Date()) {
        return d
      }
    }

    return null
  }),
  play: false,
})
</script>

<style scoped>
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--sl-color-primary-500);
  }

  70% {
    box-shadow: transparent 0px 0px 0px 0.5rem;
  }

  100% {
    box-shadow: transparent 0px 0px 0px 0px;
  }
}
</style>
