// components/ScrollListener.tsx

// useEffect を React からインポート
import { useEffect } from 'react'

// ScrollListener という関数コンポーネントを作成
const ScrollListener = () => {
  // useEffect フックを使用。
  // このフックは、コンポーネントのマウント後、アンマウント前、
  // および更新後に実行される処理を記述するためのもの
  useEffect(() => {
    // handleScroll 関数を定義。
    // この関数は window（ブラウザウィンドウ）のスクロール位置を取得し、
    // それをコンソールに出力する
    const handleScroll = () => {
      console.log(window.scrollY)
      // window.scrollY は、現在のスクロール位置をピクセル単位で表す
    }

    // window（ブラウザウィンドウ）のスクロールイベントに対して、
    // handleScroll 関数をイベントリスナーとして登録
    window.addEventListener('scroll', handleScroll)

    // useEffect の cleanup 処理。
    // コンポーネントがアンマウントされる（ページから削除される）ときに実行される
    // ここでは、window のスクロールイベントリスナーを削除している。
    // これにより、コンポーネントが存在しない場合でも
    // handleScroll 関数が実行されないようにする
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, []) // useEffect の依存配列。
  // ここが空の配列（[]）なので、
  // この useEffect フック内の処理は
  // コンポーネントの初回マウント時とアンマウント時のみに実行される

  // ScrollListener コンポーネントの表示部分。
  // ここではシンプルな div 要素を表示している
  return <div>Scroll Listener</div>
}

// ScrollListener コンポーネントを
// export（他のファイルからインポート可能にする）
export default ScrollListener

// components/ScrollToTopButton.tsx

// useState, useEffect を React からインポート
import { useState, useEffect } from 'react'

// Props の型定義。showAfter はスクロール量
type Props = {
  showAfter: number // スクロール量後にボタン表示
}

// ScrollToTopButton 関数コンポーネントの定義
const ScrollToTopButton = ({ showAfter }: Props) => {
  // isShown という state を定義。初期状態は false（非表示）
  const [isShown, setIsShown] = useState(false)

  // useEffect フックを使用
  useEffect(() => {
    // handleScroll 関数を定義。スクロール量をチェック
    const handleScroll = () => {
      // スクロール量が showAfter 以上なら表示
      if (window.scrollY >= showAfter) {
        setIsShown(true)
      } else {
        setIsShown(false) // それ以外は非表示
      }
    }

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

    // cleanup 処理。コンポーネントアンマウント時に実行
    return () => {
      // スクロールイベントリスナーを削除
      window.removeEventListener('scroll', handleScroll)
    }
  }, [showAfter]) // showAfter の変更時に再実行

  // handleClick 関数を定義。ページトップへスムーズにスクロール
  const handleClick = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }

  // isShown が false の場合、null を返し何も表示しない
  if (!isShown) return null

  // isShown が true の場合、ボタンを表示
  return <button onClick={handleClick}>Scroll to top</button>
}

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

// components/ScrollToTopButton.tsx

// css を @emotion/react からインポート
import { css } from '@emotion/react'
// useState, useEffect を React からインポート
import { useState, useEffect } from 'react'

// Props の型定義。showAfter はスクロール量
type Props = {
  showAfter: number // スクロール量後にボタン表示
}

// ScrollToTopButton 関数コンポーネントの定義
const ScrollToTopButton = ({ showAfter }: Props) => {
  // isShown という state を定義。初期状態は false（非表示）
  const [isShown, setIsShown] = useState(false)

  // useEffect フックを使用
  useEffect(() => {
    // handleScroll 関数を定義。スクロール量をチェック
    const handleScroll = () => {
      // スクロール量が showAfter 以上なら表示
      if (window.scrollY >= showAfter) {
        setIsShown(true)
      } else {
        setIsShown(false) // それ以外は非表示
      }
    }

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

    // cleanup 処理。コンポーネントアンマウント時に実行
    return () => {
      // スクロールイベントリスナーを削除
      window.removeEventListener('scroll', handleScroll)
    }
  }, [showAfter]) // showAfter の変更時に再実行

  // handleClick 関数を定義。ページトップへスムーズにスクロール
  const handleClick = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }

  // isShown が false の場合、null を返し何も表示しない
  if (!isShown) return null

  // isShown が true の場合、ボタンを表示
  // css props により buttonStyle を適用
  return (
    <button onClick={handleClick} css={buttonStyle}>
      Scroll to top
    </button>
  )
}

// buttonStyle の定義。css prop によるスタイル付け
const buttonStyle = css`
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background: #333;
  color: #fff;
  cursor: pointer;
`

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

// pages/index.tsx

import ScrollToTopButton from '../components/ScrollToTopButton'

const HomePage = () => {
  return (
    <div>
      {/* Other components... */}
      <ScrollToTopButton showAfter={300} />
    </div>
  )
}

export default HomePage