import { FC } from "react";
import { ListViewItem } from "@/components/StationDiagram/ListViewItem";
import { View, Text, ScrollView } from "react-native";
type hoge = {
  trainNumber: string;
  array: string;
  name: string;
  timeType: string;
  time: string;
};
export const ListView: FC<{
  data: hoge[];
}> = ({ data }) => {
  const groupedData: Record<string, hoge[]> = {};
  const groupKeys = [];
  data.forEach((item) => {
    const hour = item.time.split(":")[0];
    if (!groupedData[hour]) {
      groupedData[hour] = [];
      groupKeys.push(hour);
    }
    groupedData[hour].push(item);
  });
  return (
    <ScrollView
      style={{ backgroundColor: "white" }}
      stickyHeaderIndices={
        groupKeys.at(0) ? groupKeys.map((_, i) => i * 2) : []
      }
    >
      {groupKeys.map((hour) => [
        <View style={{ backgroundColor: "white", padding: 5, borderBottomWidth: 0.5, borderTopWidth: 0.5, borderBottomColor: "#ccc" }} key={hour}>
          <Text style={{ fontSize: 15 }}>{hour}時台</Text>
        </View>,
        <View>
          {groupedData[hour].map((d, i) => (
            <ListViewItem key={d.trainNumber + i} d={d} />
          ))}
        </View>,
      ])}
    </ScrollView>
  );
};
