import React, {useCallback, useMemo} from 'react';
import {FlatList, SafeAreaView, StyleSheet, Text, View} from 'react-native';

const Test = () => {
  const generateYearList = useCallback(() => {
    const currentYear = new Date().getFullYear();
    const yearList = [];
    for (let i = -50; i < 50; i++) {
      yearList.push({year: currentYear + i});
    }
    return yearList;
  }, []);

  const monthList = useMemo(
    () => [
      {name: 'January', days: 31},
      {name: 'February', days: 28},
      {name: 'March', days: 31},
      {name: 'April', days: 30},
      {name: 'May', days: 31},
      {name: 'June', days: 30},
      {name: 'July', days: 31},
      {name: 'August', days: 31},
      {name: 'September', days: 30},
      {name: 'October', days: 31},
      {name: 'November', days: 30},
      {name: 'December', days: 31},
    ],
    [],
  );

  const daysInMonth = useCallback((year, month) => {
    if (month === 2) {
      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) return 29;
      else return 28;
    }
    return [1, 3, 5, 7, 8, 10, 12].includes(month) ? 31 : 30;
  }, []);

  const MonthList = React.memo(({year, month}) => {
    const currentDate = useMemo(() => new Date(), []);
    const days = useMemo(() => {
      const arr = [];
      const firstDay = new Date(year.year, month.month - 1, 1).getDay();
      const daysInMonthCount = daysInMonth(year.year, month.month);
      for (let i = 1; i <= firstDay; i++) {
        arr.push(<View key={`empty-${i}`} style={[styles.day, styles.emptyDay]} />);
      }
      for (let i = 1; i <= daysInMonthCount; i++) {
        const isCurrentDate = year.year === currentDate.getFullYear() && month.month - 1 === currentDate.getMonth() && i === currentDate.getDate();
        arr.push(
          <View key={i} style={styles.day}>
            <Text style={[styles.dayText, isCurrentDate && styles.red]}>{i}</Text>
          </View>,
        );
      }
      return arr;
    }, [currentDate, daysInMonth, month, year]);

    const isCurrentMonth = useMemo(() => year.year === currentDate.getFullYear() && month.month - 1 === currentDate.getMonth(), [
      currentDate,
      month,
      year,
    ]);

    return (
      <View style={styles.month}>
        <Text style={[styles.monthName, isCurrentMonth && styles.red]}>{month.name}</Text>
        <View style={styles.days}>{days}</View>
      </View>
    );
  });

  const YearList = React.memo(({year}) => {
    const currentDate = useMemo(() => new Date(), []);
    const monthData = useMemo(() => monthList.map((month, index) => ({...month, month: index + 1})), []);
    const isCurrentYear = useMemo(() => year.year === currentDate.getFullYear(), [currentDate, year]);

    return (
      <View>
        <Text style={[styles.title, isCurrentYear && styles.red]}>{year.year}</Text>
        <View style={styles.line} />
        <View style={styles.monthsContainer}>
          {monthData.map((month, index) => (
            <MonthList key={index} month={month} year={year} />
          ))}
        </View>
      </View>
    );
  });

  const yearList = useMemo(() => generateYearList(), [generateYearList]);

  const currentYearIndex = yearList.findIndex(item => item.year === new Date().getFullYear());

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        // initialScrollIndex={currentYearIndex}
        data={yearList}
        renderItem={({item}) => <YearList year={item} />}
        keyExtractor={(item, index) => `${item.year}-${index}`}
      />
    </SafeAreaView>
  );
};

export default Test;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 30,
    fontWeight: 'bold',
    marginBottom: 5,
    marginLeft: 15,
  },
  line: {
    backgroundColor: 'grey',
    height: 0.5,
    opacity: 0.5,
    marginBottom: 20,
  },
  monthsContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  month: {
    width: '31%',
    marginBottom: 10,
    backgroundColor: 'red',
  },
  monthName: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
    marginLeft: 5,
  },
  days: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  day: {
    width: 20,
    height: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  dayText: {
    fontSize: 12,
    fontWeight: '600',
  },
  emptyDay: {
    backgroundColor: 'transparent',
    borderWidth: 0,
  },
  red: {
    color: 'red',
  },
});
tuỳ chỉnh theo màn hình giao diện item ngày thành hàng ngang có số lượng là 7