<script lang="ts">
  import { onMount } from 'svelte';
  import moment, { type Moment } from 'moment/moment';

  export let time;
  export let internalTime = { h: '00', m: '00', s: '00' };

  const getNextTarget = (): Moment => {
    const now = moment().utc();

    if (time.includes('T')) {
      return moment(time).utc();
    }

    const [startHour, startMinute] = time.split(':');
    let target = now.clone().hour(startHour).minute(startMinute).second(0).millisecond(0);
    if (now.isAfter(target)) {
      target.add(1, 'day');
    }
    return target;
  };

  onMount(() => {
    const update = () => {
      const diff = getNextTarget().unix() - moment().utc().unix();
      const pad = (n: number) => n.toString().padStart(2, '0');
      internalTime = {
        h: pad(Math.floor(diff / 3600)),
        m: pad(Math.floor((diff % 3600) / 60)),
        s: pad(Math.floor(diff % 60)),
      };
    };

    update();
    const interval = setInterval(update, 1000);
    return () => clearInterval(interval);
  });
</script>

<div class="countdown-wrapper">
  <div class="countdown-unit">
    <span class="countdown-value">{internalTime.h}</span>
  </div>
  <div class="countdown-separator">:</div>
  <div class="countdown-unit">
    <span class="countdown-value">{internalTime.m}</span>
  </div>
  <div class="countdown-separator">:</div>
  <div class="countdown-unit">
    <span class="countdown-value">{internalTime.s}</span>
  </div>
</div>

<style lang="scss">
  @import 'src/scss/variables';
  @import 'src/scss/mixins';
  @import 'src/scss/media';

  .countdown-wrapper {
    display: flex;
    align-items: center;
    gap: 3px;
  }

  .countdown-unit {
    display: flex;
    width: 24px;
    padding: 8px 5px;
    justify-content: center;
    align-items: center;
    gap: 3px;
    border-radius: 10px;
    border: 1px solid #313135;

    @media (min-width: 1441px) {
      width: 32px;
    }

    @media (max-width: 1440px) {
      padding: 6px 4px;
    }

    @media (max-width: 1366px) {
      width: 24px;
      border-radius: 8px;
      gap: 2px;
    }
  }

  .countdown-value {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;

    @media (max-width: 1440px) {
      font-size: 12px;
    }
  }
</style>