// ファイル名: components/BasicTimer.tsx
// ReactとReactのHooksであるuseStateをインポートしています
import React, { useState } from 'react'

// プロパティの型定義を行います。ここでは、初期カウントをnumber型で受け取るようにしています
type Props = {
  initialCount: number
}

// Functional Componentを定義します。Props型の初期カウントを受け取ります
const BasicTimer = ({ initialCount }: Props) => {
  // カウントの状態とその更新関数を定義します。初期値はPropsから受け取った初期カウントです
  const [count, setCount] = useState(initialCount)

  // tick関数を定義します。カウントが0より大きいとき、カウントを1減らします
  const tick = () => {
    if (count > 0) setCount((prevCount) => prevCount - 1)
  }

  // useEffect Hookを使って、コンポーネントのレンダリング後に実行する処理を設定します
  React.useEffect(() => {
    // 1秒ごとにtick関数を実行するタイマーを設定します
    const timerId = setInterval(() => {
      tick()
    }, 1000)

    // クリーンアップ関数を定義します。この関数はコンポーネントがアンマウントされたとき、
    // または依存配列が更新されたときに呼ばれます。
    // ここではタイマーをクリアします
    return () => clearInterval(timerId)
  }, [count]) // 依存配列にカウントを指定します。
  // これにより、カウントが変更されるたびにエフェクトが実行されます

  // カウントを表示するdiv要素をレンダリングします
  return <div>{count}</div>
}

// BasicTimerコンポーネントをエクスポートします。
// 他のファイルからimportして使うことができます
export default BasicTimer

// ファイル名: components/TimerApp.tsx
// ReactとReactのHooksであるuseStateをインポートします
import React, { useState } from 'react'

// プロパティの型定義を行います。初期カウントをnumber型で受け取ることができます
type Props = {
  initialCount: number
}

// TimerAppというFunctional Componentを定義します。Props型のinitialCountを受け取ります
const TimerApp = ({ initialCount }: Props) => {
  // カウントとその更新関数をuseState Hookで定義します。
  // 初期値はPropsから受け取った初期カウントです
  const [count, setCount] = useState(initialCount)
  // タイマーが動いているかどうかの状態とその更新関数をuseState Hookで定義します。
  // 初期値はfalseです
  const [isRunning, setIsRunning] = useState(false)

  // タイマーを開始する関数を定義します。isRunningの状態をtrueに更新します
  const start = () => setIsRunning(true)
  // タイマーを一時停止する関数を定義します。isRunningの状態をfalseに更新します
  const pause = () => setIsRunning(false)
  // タイマーをリセットする関数を定義します。カウントを初期カウントに戻し、
  // isRunningの状態をfalseに更新します
  const reset = () => {
    setCount(initialCount)
    setIsRunning(false)
  }

  // カウントダウンを実行する関数を定義します。
  // カウントが0より大きいとき、カウントを1減らします
  const tick = () => {
    if (count > 0) setCount((prevCount) => prevCount - 1)
  }

  // useEffect Hookを使って、コンポーネントのレンダリング後に実行する処理を設定します
  React.useEffect(() => {
    let timerId: NodeJS.Timeout | null = null

    // タイマーが動いていて、カウントが0より大きい場合、
    // 1秒ごとにtick関数を実行するタイマーを設定します
    if (isRunning && count > 0) {
      timerId = setInterval(() => {
        tick()
      }, 1000)
    }

    // クリーンアップ関数を定義します。
    // この関数はコンポーネントがアンマウントされたとき、
    // または依存配列が更新されたときに呼ばれます。ここではタイマーをクリアします
    return () => {
      if (timerId) clearInterval(timerId)
    }
  }, [isRunning, count])
  // 依存配列にisRunningとカウントを指定します。
  // これにより、いずれかが変更されるたびにエフェクトが実行されます

  // カウントと操作ボタンを表示するdiv要素をレンダリングします
  return (
    <div>
      <div>{count}</div> {/* 現在のカウントを表示します */}
      <button onClick={start}>Start</button> {/* Startボタン。クリックするとstart関数が実行されます */}
      <button onClick={pause}>Pause</button> {/* Pauseボタン。クリックするとpause関数が実行されます */}
      <button onClick={reset}>Reset</button> {/* Resetボタン。クリックするとreset関数が実行されます */}
    </div>
  )
}

// TimerAppコンポーネントをエクスポートします。他のファイルからimportして使うことができます
export default TimerApp

// ファイル名: pages/index.tsx
import React from 'react'
import TimerApp from '../components/TimerApp'

const IndexPage = () => {
  return (
    <div>
      <h1>Timer App</h1>
      <TimerApp initialCount={60} />
    </div>
  )
}

export default IndexPage