import React from "react";
import Link from "next/link";
import { User } from "@/interfaces/UserType";
import { StyledTableBody } from "@/components/common/StyledTable";

const formatDate = (date: Date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}/${month}/${day}`;
};

//formatDate 関数:
//formatDate 関数は、日付（Date型）を指定されたフォーマットで文字列に変換するためのユーティリティ関数です。
//date.getFullYear() メソッドは、与えられた日付から年を取得します。例えば、2023年の場合、year 変数には 2023 が格納されます。
//date.getMonth() メソッドは、月を 0 から始まるインデックスで取得します。例えば、1月は 0、2月は 1、3月は 2 となります。それを考慮して、date.getMonth() + 1 として、1月から12月までの正確な月を取得します。
//date パラメータは、フォーマットする日付です。この関数は、年、月、日の情報を取得し、yyyy/mm/dd の形式で文字列を返します。
//String(date.getMonth() + 1).padStart(2, "0") は、月を 2 桁の文字列として表現するためのコードです。
//String() メソッドで数値を文字列に変換し、padStart() メソッドを使用して文字列を 2 桁にパディングします。
//例えば、1月は "01" となります。同様に、date.getDate() メソッドで日を取得

type Props = {
  user: User;
};
//Props 型:
//Props 型は、ListItem コンポーネントが受け取るプロパティ（props）の型を定義するための TypeScript の型です。この場合、user プロパティが User 型であることが期待されています。

const ListItem: React.FC<Props> = ({ user }: Props) => {
  return (
    <>
      <StyledTableBody
        component="td"
        scope="row"
        align="left"
        style={{ cursor: "pointer" }}
      >
        <Link href={`/users/${user.slack_id}`}>{user.slack_name}</Link>
      </StyledTableBody>

     // ListItem コンポーネント:
//ListItem コンポーネントは、関数コンポーネントとして宣言されています。Props 型のプロパティ user を引数として受け取ります。
//StyledTableBody コンポーネントを使用して、テーブルの行を表現します。この行はユーザー情報を表示するためのものです。StyledTableBody は、デザインのスタイリングが適用されたテーブルセルです。
//Link コンポーネントを使用して、ユーザー名をリンクに変換します。ユーザー名をクリックすると、指定されたURL（/users/${user.slack_id}）に遷移します。ユーザーの Slack ID を使用して、ユーザーの詳細ページにリンクします。

import { useState, useEffect } from "react";

async function fetchUsersData() {
  // ISSUE: Railsからユーザーの情報を取得するように後々修正する
  try {
    const response = await fetch("/api/getUsersData");
    if (!response.ok) {
      throw new Error("ネットワークエラー");
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("エラー:", error);
    throw error;
  }
}

//async function fetchUsersData() { ... }: 非同期関数の宣言を始めます。非同期関数はasyncキーワードで始まり、非同期操作を含むコードを定義できる関数です。

//try { ... } catch (error) { ... }: エラーハンドリングのためのtry-catchブロックです。tryブロック内のコードは、エラーが発生するかもしれない操作を含んでいます。エラーが発生した場合、catchブロック内のコードが実行されます。

//const response = await fetch("/api/getUsersData");: fetch関数を使用して、指定されたURL ("/api/getUsersData") からデータを取得しようとしています。awaitキーワードを使用して、fetch関数の非同期操作が完了するのを待ちます。この操作はHTTPリクエストを送信し、APIからデータを受け取ることを試みます。

//if (!response.ok) { throw new Error("ネットワークエラー"); }: 取得したHTTP応答のステータスコードが成功 (200 OK) でない場合、つまりネットワークエラーが発生した場合、エラーメッセージとともにエラーをスローします。

//const data = await response.json();: HTTP応答からJSONデータを読み取り、data変数に格納しています。この操作も非同期であり、awaitを使用して完了を待ちます。

//return data;: JSONデータが正常に取得された場合、このデータを呼び出し元に返します。

//console.error("エラー:", error); throw error;: エラーハンドリングの一部として、エラーメッセージと共にエラーをコンソールに出力し、エラーを再スローします。これにより、エラーが呼び出し元に伝播し、エラーハンドリングが可能となります。

//この関数は、HTTPリクエストを送信してAPIからデータを取得し、取得したデータを呼び出し元に返します。また、ネットワークエラーが発生した場合に備えてエラーハンドリングも行っています。このコードは、フロントエンドでバックエンドAPIとの通信を行う際に非常に一般的なアプローチです。

export default function useFetchUsersData() {
  const [usersData, setUsersData] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchUsersData()
      .then((data) => {
        setUsersData(data);
        setError(null);
      })

      .catch((error) => {
        setError(error);
      });
  }, []);

  return { usersData, error };

  //ユーザーデータを取得するためのカスタムフック(useFetchUsersData)を定義しています。以下はこのコードの詳細な解説です。

//export default function useFetchUsersData() { ... }: カスタムフックの宣言を始めます。このフックは、ユーザーデータの取得とエラーハンドリングを担当します。

//const [usersData, setUsersData] = useState([]);: useState フックを使用して、usersData という状態変数と、その状態変数を更新するための setUsersData 関数を定義します。usersData はユーザーデータを保持します。

//const [error, setError] = useState(null);: 同様に、エラー情報を保持するための error 状態変数と、エラー情報を更新するための setError 関数を定義します。初期値は null です。

//useEffect(() => { ... }, []);: useEffect フックを使用して、副作用の実行タイミングを管理します。この useEffect は初回のレンダリング時に一度だけ実行されるように [] という空の依存リストが指定されています。

//fetchUsersData().then((data) => { ... }).catch((error) => { ... });: fetchUsersData 関数を呼び出し、その非同期操作の結果を処理します。

//fetchUsersData 関数が非同期でユーザーデータを取得し、成功した場合は .then ブロックが実行されます。取得したデータは data として受け取り、setUsersData を使用して usersData 状態変数にセットされ、同時に error は null にクリアされます。

//ユーザーデータの取得に失敗した場合は、.catch ブロックが実行されます。エラーオブジェクトが error 状態変数にセットされ、usersData は変更されません。

//return { usersData, error };: カスタムフックが提供する戻り値です。このフックは usersData（ユーザーデータ）と error（エラー情報）の現在の状態を返します。コンポーネント内でこのフックを使用すると、ユーザーデータとエラー情報にアクセスできます。

//このカスタムフックを使用すると、コンポーネントでユーザーデータを非同期に取得する際に、データの取得とエラーハンドリングが単純化されます。コンポーネントは usersData と error の値を参照し、必要に応じて表示やエラーメッセージを処理できます。