import { For } from 'solid-js';
import { createViewportObserver } from '@solid-primitives/intersection-observer';

import { useStore } from '../../store/index';
import type { Store } from '../../store/index';
import { scrollHereWhenSelected } from "../../utlis/scroll";
import styles from './Projects.module.css';
import projects from './projectList';
import Project from './Project';
import type { Project as ProjectType } from './projectList';

export default () => {
  const [state, setters] = useStore() as Store;
  const [observer] = createViewportObserver({threshold: 0.1});
  const chapterName = 'projects'

  return (
    <div
      use:observer={(event) => {
        if (event.isIntersecting) {
          if (!state.scrolling()) {
            setters.setVisibleChapter(chapterName);
          } else if (state.visibleChapter() === chapterName) {
            setters.setScrolling(false)
          }
        }
      }}
      ref={(element) => scrollHereWhenSelected(element, [state, setters], chapterName)}
      class={styles.Projects}
    >
      <For each={projects}>{(project: ProjectType) =>
        <Project
          project={project}
        />
      }</For>
      
    </div>
  )
};