import * as React from 'react';
import { View } from 'react-native';

import { SegmentedControl } from '@/components/nativewindui/SegmentedControl';
import { Text } from '@/components/nativewindui/Text';

const VALUES = ['Week', 'Month', 'Year'];

const weekIndex = 0;
const monthIndex = 1;
const yearIndex = 2;

const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

const currentDate = new Date();
const currentDay = currentDate.getDate();
const currentMonth = MONTHS[currentDate.getMonth()];
const currentYear = currentDate.getFullYear();

export default function Screen() {
  const [selectedIndex, setSelectedIndex] = React.useState(0);
  return (
    <View className="flex-1 p-4">
      <SegmentedControl
        values={VALUES}
        selectedIndex={selectedIndex}
        onIndexChange={(index) => {
          setSelectedIndex(index);
        }}
      />
      <View className="flex-1 py-8">
        {selectedIndex === weekIndex && <WeekContent />}
        {selectedIndex === monthIndex && <MonthContent />}
        {selectedIndex === yearIndex && <YearContent />}
      </View>
    </View>
  );
}

function WeekContent() {
  return (
    <View className="flex-1 gap-4">
      <Text variant="largeTitle" className="font-bold">
        {currentMonth} {currentDay}
      </Text>
      <View className="border-border bg-card gap-2 rounded-lg border p-4">
        <Text className="text-muted-foreground font-medium">Total sales</Text>
        <Text variant="title1" className="font-bold">
          $100,000
        </Text>
      </View>
    </View>
  );
}

function MonthContent() {
  return (
    <View className="flex-1 gap-4">
      <Text variant="largeTitle" className="font-bold">
        {currentMonth} {currentYear}
      </Text>
      <View className="border-border bg-card gap-2 rounded-lg border p-4">
        <Text className="text-muted-foreground font-medium">Total sales</Text>
        <Text variant="title1" className="font-bold">
          $500,000
        </Text>
      </View>
    </View>
  );
}

function YearContent() {
  return (
    <View className="flex-1 gap-4">
      <Text variant="largeTitle" className="font-bold">
        {currentYear}
      </Text>
      <View className="border-border bg-card gap-2 rounded-lg border p-4">
        <Text className="text-muted-foreground font-medium">Total sales</Text>
        <Text variant="title1" className="font-bold">
          $1,000,000
        </Text>
      </View>
    </View>
  );
}