// SliderPopup.tsx
import React from "react";
import { Modal, View, Pressable, StyleSheet, TouchableOpacity, ScrollView, Text } from "react-native";

export default function SliderPopup({
  visible,
  onClose,
  onValidate,
  children,
  actionButton
}) {
  return (
    <Modal
      visible={visible}
      transparent
      animationType="fade"
      onRequestClose={onClose}
    >
      {/* Backdrop */}
            <Pressable style={styles.backdrop} onPress={onClose}>
              {/* Contenu */}
              <Pressable onPress={() => {}} style={styles.content}>
                <ScrollView
                  style={{ flex: 1 }}
                  contentContainerStyle={{ paddingBottom: 40 }}
                  showsVerticalScrollIndicator={false}
                >
                  {children}
                </ScrollView>


                {actionButton && (
                  <View style={{ width: "100%", alignItems: "center" }}>
                    {actionButton}
                  </View>
                )}
              </Pressable>

            </Pressable>
    </Modal>
  );
}

const styles = StyleSheet.create({
  backdrop: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.5)",
    justifyContent: "center",
    alignItems: "center",
    paddingTop: -90,
    paddingBottom: 30,
  },
  content: {
    backgroundColor: "white",
    borderRadius: 15,
    width: "90%",
    height: "85%", // Taille
    padding: 16,
    marginTop: -90,   // ← déplace la popup vers le haut ou bas
  },

  centerWrapper: {
    justifyContent: "flex-start",   // ← Le contenu commence en haut
  },

  okContainer: {
    width: "100%",
    alignItems: "flex-end",
    marginTop: 20,
  },

  okText: {
    color: "white",
    fontWeight: "bold",
  },
});

export function SliderPopupOkButton({ onValidate }) {
  return (
    <TouchableOpacity onPress={onValidate}>
      <View style={{
        paddingHorizontal: 12,
        paddingVertical: 10,
        borderRadius: 10,
        backgroundColor: '#90EE90',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
        <Text style={{ color: 'black', fontWeight: 'bold' }}>OK</Text>
      </View>
    </TouchableOpacity>
  );
}








// Séparation







{showSliderPopup ? (
  <View>

    {/* Titre */}
    <Text
      style={{
        fontSize: TYPO.POPUP_TITLE,
        fontWeight: 'bold',
        textAlign: 'center',
        marginBottom: 50,
      }}
    >
      {s.surname}
    </Text>

    {/* Phrase */}
    <Text
      style={{
        fontSize: 16,
        textAlign: 'center',
        marginBottom: 180,
      }}
    >
      {getSentenceForValue(sliderValue, isDescending)}
    </Text>

    {/* carré vert */}
    <View style={{ width: '100%', alignItems: 'center', marginBottom: -60 }}>
      <View
        style={{
          width: 80,
          height: 80,
          borderRadius: 0,
          borderColor: 'black',
          borderWidth: 2,
          backgroundColor: '#00C100',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Text style={[styles.valueText, { margin: 0, paddingBottom: 10 }]}>
          {sliderValue}
        </Text>
      </View>
    </View>

    {/* Ligne cercle gris + OK */}
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 60,
      }}
    >
      <View>
        <View
          style={{
            width: 50,
            height: 50,
            borderRadius: 40,
            borderColor: 'black',
            borderWidth: 2,
            backgroundColor: 'lightgrey',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text
            style={[
              styles.valueText,
              { margin: 0, paddingBottom: 10, fontSize: 20 },
            ]}
          >
            {savedSliderValue}
          </Text>
        </View>

        {savedDate && (
          <Text
            style={{
              position: 'absolute',
              top: 55,
              left: 0,
              right: 0,
              fontSize: 15,
              color: 'black',
              textAlign: 'center',
            }}
          >
            {savedDate}
          </Text>
        )}
      </View>

      <SliderPopupOkButton
        onValidate={() => {
          if (sliderValue !== undefined) {
            setSavedSliderValue(sliderValue);
            recupSliderValue?.(sliderValue);
            setVolatile(s.id, sliderValue);

            const today = new Date();
            const formattedDate = `${today
              .getDate()
              .toString()
              .padStart(2, '0')}/${(today.getMonth() + 1)
              .toString()
              .padStart(2, '0')}/${today.getFullYear()}`;
            setSavedDate(formattedDate);
          }
          setSelectedUnitButton('valider');
          setShowSliderPopup(false);
        }}
      />
    </View>

    {/* Réglette */}
    <View
      style={{
        width: '100%',
        alignItems: 'center',
        marginBottom: -30,
        position: 'relative',
      }}
    >
      <Image
        source={reglette1}
        style={{
          width: '110%',
          height: 60,
          resizeMode: 'contain',
        }}
      />

      <Text
        style={{
          position: 'absolute',
          left: '5%',
          bottom: -20,
          fontSize: 18,
          fontWeight: 'bold',
        }}
      >
        {isDescending ? sliderMax : sliderMin}
      </Text>

      <Text
        style={{
          position: 'absolute',
          right: '5%',
          bottom: -20,
          fontSize: 18,
          fontWeight: 'bold',
        }}
      >
        {isDescending ? sliderMin : sliderMax}
      </Text>
    </View>

    {/* Slider */}
    <View style={{ flex: 1, paddingBottom: 100 }}>
      <View
        style={{
          height: 0,
          justifyContent: 'center',
          width: '100%',
        }}
      >
        <Slider
          style={{
            width: '100%',
            height: 140,
          }}
          minimumTrackTintColor="transparent"
          maximumTrackTintColor="transparent"
          thumbTintColor="transparent"
          thumbStyle={{
            width: 40,
            height: 1,
            marginTop: -60,
          }}
          thumbTouchSize={{
            width: 200,
            height: 170,
          }}
          thumbProps={{
            children: (
              <View
                style={{
                  width: 40,
                  height: 120,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
                pointerEvents="none"
              >
                <Svg height="66" width="66" viewBox="0 0 64 64">
                  <Polygon
                    points="25,6 30,38 18,38"
                    fill="black"
                    stroke="white"
                    strokeWidth="2"
                  />
                  <Circle
                    cx="24"
                    cy="45"
                    r="10"
                    fill="red"
                    stroke="red"
                    strokeWidth="2"
                  />
                </Svg>
              </View>
            ),
          }}
          value={realToRaw(
            sliderValue !== undefined
              ? sliderValue
              : isDescending
              ? unitLeft
              : sliderMin
          )}
          onValueChange={handleSliderChange}
          minimumValue={sliderMin}
          maximumValue={sliderMax}
          step={1}
        />
      </View>
    </View>
  </View>
) : (
  <View>
    <ProfileAskPersonal
      onTextChange={(text: string) => {
        setTxt(text);
      }}
      nameText={noText ? '' : s.name}
      inputPlaceholder={s.unit}
      displayPersonal={false}
      initValue={''}
    />
    <Button text="Validate" onPress={handleValidateT} isSelected />
  </View>
)}