import {View} from 'react-native'

import {CardRowTitle} from '@/components/ui/card'
import {Link} from '@/components/ui/link'
import {Tile, TILE_HEIGHT} from '@/components/ui/tile'
import {Text} from '@/components/ui/typography'
import {formatDayDate} from '@/lib/dates'
import {upcomingCrumbs} from '@/lib/planned'
import {atoms as a, useTheme} from '@/sprinkles'
import {usePlanned} from '@/stores/crumbs'

export const ComingUpTile = () => {
  const t = useTheme()
  const upcoming = upcomingCrumbs(usePlanned())
  const next = upcoming[0]
  const extra = upcoming.length - 1

  return (
    <Link
      href="/planned"
      accessibilityLabel="Coming up"
      style={[a.flex_1, {height: TILE_HEIGHT}]}
    >
      {(isPressed) => (
        <Tile label="Coming up" pressed={isPressed} style={a.flex_1}>
          {next ? (
            <View style={[a.flex_1, a.justify_between, a.gap_sm]}>
              <CardRowTitle numberOfLines={2}>
                {next.crumb.name}
              </CardRowTitle>
              <Text style={t.atoms.text_contrast_medium}>
                {extra > 0
                  ? `${formatDayDate(next.date)} · +${extra} more`
                  : formatDayDate(next.date)}
              </Text>
            </View>
          ) : (
            <View style={[a.flex_1, a.justify_end]}>
              <Text style={t.atoms.text_contrast_medium}>
                Nothing planned yet
              </Text>
            </View>
          )}
        </Tile>
      )}
    </Link>
  )
}
