import { defineComponent, ref, onMounted, onUnmounted, computed } from 'vue';
import { useRouter } from 'vue-router';

import { tools } from '@tools';
import { useGlobalStore } from 'app/src/store';

import { static_data } from '@src/db/static_data'

// ==========================================
// TYPES
// ==========================================
interface Value {
  icon: string;
  title: string;
  text: string;
}

interface Step {
  title: string;
  text: string;
}

interface HeroImage {
  src: string;
  alt: string;
}
// ==========================================
// COMPONENT
// ==========================================
export default defineComponent({
  name: 'RisoHomepage',

  setup() {
    // ==========================================
    // COMPOSABLES
    // ==========================================
    const router = useRouter();

    const globalStore = useGlobalStore()

    // ==========================================
    // STATE
    // ==========================================
    const showScrollTop = ref(false);
    const currentSlide = ref(0);

    // Array immagini hero - PERSONALIZZABILE
    const heroImages = ref<HeroImage[]>([
      {
        src: '/images/hero/cerchio_riso.jpg',
        alt: 'Comunità RISO che si incontra'
      },
      {
        src: '/images/hero/mercatino_riso.jpg',
        alt: 'Utilizzo della App RISO'
      },
      {
        src: '/images/hero/riso_home_app.png',
        alt: 'App di RISO'
      }
    ]);

    const values = ref<Value[]>([
      {
        icon: '🤝',
        title: 'Comunità',
        text: 'Creiamo legami autentici basati su sostegno reciproco e fiducia.',
      },
      {
        icon: '💚',
        title: 'Fiducia',
        text: 'La base del nostro sistema di scambio e delle nostre relazioni.',
      },
      {
        icon: '🔄',
        title: 'Condivisione',
        text: 'Scambiamo esperienze, beni e servizi in armonia con la natura.',
      },
      {
        icon: '👂',
        title: 'Ascolto',
        text: 'Ogni voce è importante nelle decisioni della comunità.',
      },
      {
        icon: '🌱',
        title: 'Sostenibilità',
        text: "Promuoviamo stili di vita sani e rispettosi dell'ambiente.",
      },
      {
        icon: '🏠',
        title: 'Autosufficienza',
        text: "Costruiamo collettività libere e indipendenti dall'economia tradizionale.",
      },
    ]);

    const steps = ref<Step[]>([
      {
        title: 'Unisciti alla Comunità',
        text: "Registrati alla Piattaforma di RISO e trova la comunità territoriale della tua provincia su Telegram e richiedi l'accesso.",
      },
      {
        title: 'Conosci i Membri',
        text: 'Partecipa agli incontri locali e ai mercatini per conoscere gli altri membri della comunità. Se nella tua zona non sono ancora attivi, contattaci: ti aiuteremo a organizzare il primo incontro sul Progetto RISO.',
      },
      {
        title: 'Inizia a Scambiare',
        text: 'Crea annunci di beni e servizi, ospitalità, scambia usando il baratto, scambio lavoro, RIS, dono o altre modalità che ritieni utili.',
      },
      {
        title: 'Usa i RIS',
        text: 'Scambia in RIS, anche parzialmente: puoi combinare RIS con Euro, baratto o dono nella stessa transazione. Parti da 0 RIS: quando ricevi vai in positivo, quando offri vai in negativo. Più usi i RIS, meno dipendi dall\'economia tradizionale.'
      },
    ]);

    // ==========================================
    // COMPUTED
    // ==========================================
    const currentYear = computed(() => new Date().getFullYear());

    // ==========================================
    // METHODS
    // ==========================================
    const scrollToTop = (): void => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth',
      });
    };

    const scrollToAbout = (): void => {
      const element = document.getElementById('about');
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    };

    const scrollToRegistrazione = (): void => {
      const element = document.getElementById('registrazione');
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    };

    const goToApp = (): void => {
      router.push('/registrati');
    };
    const goToHome= (): void => {
      router.push('/');
    };

    const handleScroll = (): void => {
      showScrollTop.value = window.scrollY > 300;
    };

     // Slideshow automatico
    let slideInterval: ReturnType<typeof setInterval> | null = null;

    const startSlideshow = (): void => {
      slideInterval = setInterval(() => {
        currentSlide.value = (currentSlide.value + 1) % heroImages.value.length;
      }, 5000); // Cambia immagine ogni 5 secondi
    };

    const stopSlideshow = (): void => {
      if (slideInterval) {
        clearInterval(slideInterval);
        slideInterval = null;
      }
    };

    const goToSlide = (index: number): void => {
      currentSlide.value = index;
      stopSlideshow();
      startSlideshow(); // Riavvia il timer
    };

    // ==========================================
    // LIFECYCLE
    // ==========================================
    onMounted(() => {
      window.addEventListener('scroll', handleScroll);
      startSlideshow();
    });

    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll);
      stopSlideshow();
    });

    // ==========================================
    // RETURN
    // ==========================================
    return {
      // State
      showScrollTop,
      values,
      steps,
      heroImages,
      currentSlide,

      // Computed
      currentYear,

      // Methods
      scrollToTop,
      scrollToAbout,
      scrollToRegistrazione,
      goToApp,
      goToSlide,
      tools,
      globalStore,
      goToHome,
      static_data,
    };
  },
});