import Styles from "@/constants/Styles"
import { useTheme } from "@/providers/ThemeProvider"
import { useState } from "react"
import { TouchableOpacity, View } from "react-native"
import DrawerBottom from "./drawerBottom"
import { InputForm } from "./inputForm"
import Text from "./Text"

type Props = {
   isVisible: boolean
   setVisible: (value: boolean) => void
   onTolak: (note: string) => void
   loading?: boolean
}

export default function ModalTolakApproval({ isVisible, setVisible, onTolak, loading }: Props) {
   const { colors } = useTheme()
   const [note, setNote] = useState('')
   const [error, setError] = useState(false)

   function handleClose(value: boolean) {
      setNote('')
      setError(false)
      setVisible(value)
   }

   function handleSubmit() {
      if (!note.trim()) {
         setError(true)
         return
      }
      onTolak(note.trim())
      setNote('')
      setError(false)
   }

   return (
      <DrawerBottom
         isVisible={isVisible}
         setVisible={handleClose}
         title="Tolak Tugas"
         animation="slide"
         height={45}
         keyboard
      >
         <View style={{ flex: 1 }}>
            <InputForm
               label="Alasan Penolakan"
               placeholder="Tuliskan alasan penolakan..."
               type="default"
               multiline
               bg="transparent"
               value={note}
               onChange={setNote}
               error={error}
               errorText="Alasan penolakan wajib diisi"
               required
            />
         </View>

         <TouchableOpacity
            onPress={handleSubmit}
            disabled={loading}
            style={{
               backgroundColor: loading ? colors.error + '60' : colors.error,
               borderRadius: 30,
               paddingVertical: 10,
               alignItems: 'center',
               marginTop: 8,
            }}
         >
            <Text style={[Styles.textDefaultSemiBold, Styles.cWhite]}>
               {loading ? 'Memproses...' : 'Tolak Tugas'}
            </Text>
         </TouchableOpacity>
      </DrawerBottom>
   )
}