import { useState, useEffect } from 'react'

// Props型定義。固定化するスクロール位置を示すthresholdを受け取る。
type Props = {
  threshold: number
}

const StickyMenu = ({ threshold }: Props) => {
  // isStickyというstateを定義。デフォルトはfalse（非固定状態）
  const [isSticky, setIsSticky] = useState(false)

  useEffect(() => {
    // スクロールイベントのハンドラー定義。
    // スクロール位置がthresholdを超えるとisStickyをtrueに設定
    const handleScroll = () => {
      const currentScrollY = window.scrollY // 現在のスクロール位置を取得
      setIsSticky(currentScrollY > threshold) // 現在位置が閾値を超えていればisStickyをtrueに
    }

    // スクロールイベントにhandleScrollを登録
    window.addEventListener('scroll', handleScroll)

    // コンポーネントアンマウント時にイベントリスナーを削除
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [threshold]) // thresholdが変更されたらuseEffectを再実行

  // isStickyがtrueならpositionをfixedにし、
  // そうでなければrelativeに設定
  return <div style={{ position: isSticky ? 'fixed' : 'relative' }}>{/* Menu content */}</div>
}

import { StickyMenu } from '../components/StickyMenu' // StickyMenuコンポーネントのインポート

// IndexPageというReactコンポーネントの定義
const IndexPage = () => (
  <>
    {/* StickyMenuコンポーネントの利用。スクロール位置が200を超えた時にメニューを固定化 */}
    <StickyMenu threshold={200}>
      {/* メニューアイテムのリスト */}
      <ul>
        <li>
          <a href="#section1">Section 1</a>
        </li>
        <li>
          <a href="#section2">Section 2</a>
        </li>
      </ul>
    </StickyMenu>
  </>
)

// IndexPageコンポーネントをエクスポート
export default IndexPage

/** @jsxImportSource @emotion/react */
// @emotion/reactとcssをインポート
import { css } from '@emotion/react'
import { useState, useEffect } from 'react' // ReactのuseState, useEffectをインポート

type Props = {
  threshold: number // thresholdプロパティを定義
}

// StickyMenuというコンポーネントの定義
const StickyMenu = ({ threshold }: Props) => {
  // isStickyというstateを定義、初期値はfalse
  const [isSticky, setIsSticky] = useState(false)

  // useEffectフックを使用。
  // スクロール位置がthresholdを超えたときにisStickyをtrueにする
  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY // 現在のスクロール位置を取得
      setIsSticky(currentScrollY > threshold) // スクロール位置がthresholdを超えているかチェック
    }

    // スクロールイベントリスナーを設定
    window.addEventListener('scroll', handleScroll)
    // コンポーネントアンマウント時にイベントリスナーを削除
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [threshold]) // thresholdが変更されたときにeffectを再実行

  // メニューのスタイルを定義。isStickyの値に基づいてスタイルを切り替え
  const menuStyle = css`
    position: ${isSticky ? 'fixed' : 'relative'};
    top: 0;
    width: 100%;
    background: white;
    box-shadow: ${isSticky ? '0 2px 4px rgba(0, 0, 0, 0.2)' : 'none'};
  `

  // コンポーネントをレンダリング。スタイルはmenuStyleを適用
  return <div css={menuStyle}>{/* Menu content */}</div>
}

const StickyMenu = ({ threshold }: Props) => {
  // omitted...

  const handleItemClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
    event.preventDefault()
    const targetId = event.currentTarget.getAttribute('href')
    const targetElement = document.querySelector(targetId)
    if (targetElement) {
      window.scrollTo({
        top: targetElement.getBoundingClientRect().top + window.pageYOffset - 100,
        behavior: 'smooth',
      })
    }
  }

  return (
    <div css={menuStyle}>
      <ul>
        <li>
          <a href="#section1" onClick={handleItemClick}>
            Section 1
          </a>
        </li>
        <li>
          <a href="#section2" onClick={handleItemClick}>
            Section 2
          </a>
        </li>
        {/* More menu items */}
      </ul>
    </div>
  )
}