import { useFocusEffect } from '@react-navigation/native'
import React, { useCallback, useMemo, useState } from 'react'
import { Dimensions, NativeModules, View } from 'react-native'
import { Button, Text, useTheme } from 'react-native-paper'
import { ProgressCircle } from 'react-native-svg-charts'
import AppFab from './AppFab'
import { MARGIN, PADDING } from './constants'
import { settingsRepo } from './db'
import DrawerHeader from './DrawerHeader'
import Settings from './settings'
import useTimer from './use-timer'

export interface TickEvent {
  minutes: string
  seconds: string
}

export default function TimerPage() {
  const { minutes, seconds } = useTimer()
  const [settings, setSettings] = useState<Settings>()
  const { colors } = useTheme()

  useFocusEffect(
    useCallback(() => {
      settingsRepo.findOne({ where: {} }).then(setSettings)
    }, []),
  )

  const stop = () => {
    NativeModules.AlarmModule.stop()
  }

  const add = async () => {
    console.log(`${TimerPage.name}.add:`, settings)
    NativeModules.AlarmModule.add()
  }

  const progress = useMemo(() => {
    return (Number(minutes) * 60 + Number(seconds)) / 210
  }, [minutes, seconds])

  const left = useMemo(() => {
    return Dimensions.get('screen').width * 0.5 - 60
  }, [])

  return (
    <>
      <DrawerHeader name='Timer' />
      <View style={{ flexGrow: 1, padding: PADDING }}>
        <View
          style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text style={{ fontSize: 70, position: 'absolute' }}>
            {minutes}:{seconds}
          </Text>
          <ProgressCircle
            style={{ height: 300, width: 300, marginBottom: MARGIN }}
            progress={progress}
            strokeWidth={10}
            progressColor={colors.primary}
            backgroundColor={colors.primary + '80'}
          />
        </View>
      </View>
      <Button onPress={add} style={{ position: 'absolute', top: '82%', left }}>
        Add 1 min
      </Button>
      <AppFab icon='stop' onPress={stop} />
    </>
  )
}