import { useState, useEffect } from "react";

import { View, Text, Pressable, StyleSheet, Platform } from "react-native";

import DateTimePicker from "@react-native-community/datetimepicker";

import { format } from "date-fns";

import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";

import { Colors } from '@/constants/theme';

import { Label } from '@/components/ui/Input';

export default function DatePickerField({

  label,

  initialDate = new Date(),

  onChange,

  minimumDate,

  maximumDate,

}) {

  const [date, setDate] = useState(initialDate);

  const [show, setShow] = useState(false);

  useEffect(() => {

    setDate(initialDate);

  }, [initialDate]);

  const openPicker = () => setShow(true);

  const handleChange = (event, selectedDate) => {

    setShow(false);

    if (selectedDate) {

      setDate(selectedDate);

      if (onChange) onChange(selectedDate);

    }

  };

  const formatted = format(date, "dd/MM/yyyy");

  return (

    <View>

      <Label text={label} />

      <Pressable onPress={openPicker}

                 style={({ pressed }) => [styles.container, pressed && styles.pressed]}>

        <Text style={styles.dateText}>{formatted}</Text>

        <MaterialCommunityIcons name="calendar-outline" size={22} color="#6B7280" />

      </Pressable>

      {show && (

        <DateTimePicker

          value={date}

          mode="date"

          display={"default"}

          onChange={handleChange}

          minimumDate={minimumDate}

          maximumDate={maximumDate}

        />

      )}

    </View>

  );

}

const styles = StyleSheet.create({

  label: {

    fontWeight: '500',

    color: Colors.light.textSecondary,

    fontSize: 12,

    marginBottom: 8,

    letterSpacing: 0.5,

    textTransform: 'uppercase'

  },

  container: {

    flexDirection: "row",

    alignItems: "center",

    justifyContent: "space-between",

    backgroundColor: "#F3F4F6", // light gray pill

    paddingVertical: 14,

    paddingHorizontal: 16,

    borderRadius: 10,

    borderWidth: 0.5,

    borderColor: "#E5E7EB",

    minWidth: 220,

  },

  pressed: {

    opacity: 0.8,

  },

  dateText: {

    color: "#111827",

    fontSize: 16,

    fontWeight: "600",

  },

});