"use client"

/*
 * File: HospitalSelectionScreen.tsx
 * Description: Hospital selection screen with dropdown using react-native-element-dropdown.
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import type React from "react"
import { useState } from "react"
import { View, Text, StyleSheet, TouchableWithoutFeedback, Keyboard } from "react-native"
import { Dropdown } from "react-native-element-dropdown"
import { Button } from "../../../../shared/src/components/Button"
import { Colors, Spacing, Typography } from "../../../../shared/src/theme"
import { showError } from "../../../../shared/src/utils/helpers/Toast"
import Icon from "react-native-vector-icons/Feather"
import OnboardingContainer from "./OnboardingContainer"
import { selectHospitals } from "../redux"
import { useSelector } from "react-redux"

interface HospitalSelectionScreenProps {
  onContinue: (hospitalId: string) => void
  onBack: () => void
}

const hospitalData = [
  { label: "City General Hospital", value: "city_general" },
  { label: "St. Mary's Medical Center", value: "st_marys" },
  { label: "University Hospital", value: "university" },
  { label: "Regional Medical Center", value: "regional" },
  { label: "Metropolitan Hospital", value: "metropolitan" },
  { label: "Community Health Center", value: "community" },
  { label: "Children's Hospital", value: "childrens" },
  { label: "Veterans Medical Center", value: "veterans" },
]

const HospitalSelectionScreen: React.FC<HospitalSelectionScreenProps> = ({ onContinue, onBack }) => {
  const [selectedHospital, setSelectedHospital] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)
  const [isFocus, setIsFocus] = useState(false)
  const hospitals :any=useSelector(selectHospitals)

  const handleContinue = () => {
    if (!selectedHospital) {
      showError("Validation Error", "Please select a hospital to continue.")
      return
    }

    setLoading(true)
    setTimeout(() => {
      setLoading(false)
      onContinue(selectedHospital)
    }, 1000)
  }

  const renderLabel = () => {
    if (selectedHospital || isFocus) {
      return <Text style={[styles.label, isFocus && { color: Colors.primary }]}>Select Hospital</Text>
    }
    return null
  }

  return (
    <OnboardingContainer onBack={onBack}>
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <View style={styles.container}>
        {/* <View style={styles.header}>
          <Icon name="arrow-left" size={24} color={Colors.textPrimary} onPress={onBack} />
        </View> */}

        <View style={styles.content}>
          <View style={styles.iconContainer}>
            <View style={styles.iconWrapper}>
              <Icon name="map-pin" size={32} color={Colors.primary} />
            </View>
          </View>

          <Text style={styles.title}>Select Hospital</Text>
          <Text style={styles.subtitle}>Choose the hospital you're affiliated with.</Text>

          <View style={styles.dropdownContainer}>
            {renderLabel()}
            <Dropdown
              style={[styles.dropdown, isFocus && { borderColor: Colors.primary }]}
              placeholderStyle={styles.placeholderStyle}
              selectedTextStyle={styles.selectedTextStyle}
              inputSearchStyle={styles.inputSearchStyle}
              iconStyle={styles.iconStyle}
              data={hospitals}
              search
              maxHeight={300}
              labelField="hospital_name"
              valueField="hospital_id"
              placeholder={!isFocus ? "Select Hospital" : "..."}
              searchPlaceholder="Search hospitals..."
              value={selectedHospital}
              onFocus={() => setIsFocus(true)}
              onBlur={() => setIsFocus(false)}
              onChange={(item) => {
                console.log('item',item)
                setSelectedHospital(item.hospital_id)
                setIsFocus(false)
              }}
              renderLeftIcon={() => (
                <Icon
                  style={styles.icon}
                  color={isFocus ? Colors.primary : Colors.textSecondary}
                  name="map-pin"
                  size={20}
                />
              )}
            />
          </View>

          <Button
            title="Create Account"
            onPress={handleContinue}
            style={[styles.button, !selectedHospital && styles.buttonDisabled]}
            loading={loading}
          />
        </View>
      </View>
    </TouchableWithoutFeedback>
    </OnboardingContainer>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // backgroundColor: Colors.background,
  },
  header: {
    paddingTop: Spacing.xl,
    paddingHorizontal: Spacing.lg,
    paddingBottom: Spacing.md,
  },
  content: {
    flex: 1,
    // paddingHorizontal: Spacing.lg,
    justifyContent: "center",
  },
  iconContainer: {
    alignItems: "center",
    marginBottom: Spacing.xl,
  },
  iconWrapper: {
    width: 80,
    height: 80,
    borderRadius: 20,
    backgroundColor: Colors.backgroundAlt,
    justifyContent: "center",
    alignItems: "center",
    borderWidth: 1,
    borderColor: Colors.border,
  },
  title: {
    fontFamily: Typography.fontFamily.bold,
    fontSize: Typography.fontSize.title,
    color: Colors.textPrimary,
    textAlign: "center",
    marginBottom: Spacing.sm,
  },
  subtitle: {
    fontFamily: Typography.fontFamily.regular,
    fontSize: Typography.fontSize.md,
    color: Colors.textSecondary,
    textAlign: "center",
    marginBottom: Spacing.xl,
  },
  dropdownContainer: {
    marginBottom: Spacing.xl,
  },
  label: {
    position: "absolute",
    // backgroundColor: Colors.background,
    left: 0,
    top: -20,
    zIndex: 999,
    paddingHorizontal: 8,
    fontSize: Typography.fontSize.sm,
    color: Colors.textSecondary,
    fontFamily: Typography.fontFamily.bold,
  },
  dropdown: {
    height: 50,
    borderColor: Colors.border,
    borderWidth: 1,
    borderRadius: 12,
    paddingHorizontal: Spacing.md,
    backgroundColor: Colors.backgroundAlt,
  },
  icon: {
    marginRight: Spacing.sm,
  },
  placeholderStyle: {
    fontSize: Typography.fontSize.md,
    color: Colors.textMuted,
    fontFamily: Typography.fontFamily.regular,
  },
  selectedTextStyle: {
    fontSize: Typography.fontSize.md,
    color: Colors.textPrimary,
    fontFamily: Typography.fontFamily.regular,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
  inputSearchStyle: {
    height: 40,
    fontSize: Typography.fontSize.md,
    color: Colors.textPrimary,
    fontFamily: Typography.fontFamily.regular,
  },
  button: {
    marginTop: Spacing.md,
  },
  buttonDisabled: {
    opacity: 0.5,
  },
})

export default HospitalSelectionScreen

/*
 * End of File: HospitalSelectionScreen.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */