musicland/src/components/InputRow.js

import { useState } from "react";
import { View, Text, Image, Pressable, StyleSheet } from "react-native";
import { BlurView } from "expo-blur";

import Switch from "../components/Switch";
import OptionSelector from "../components/OptionSelector";
import { Container, Title, Input, Button } from "../components/Dialog";

import { Fonts, Style, gutters } from "../styles";
import { icons } from "../assets";

const labelOptions = {
  name: "Nouveau nom",
  email: "Nouvelle adresse email",
  password: "Nouveau mot de passe",
  language: "Nouvelle langue",
};

const languageOptions = {
  fr: "Français",
  en: "English",
  es: "Español",
  de: "Deutsch",
  it: "Italiano",
};

export default ({ itemKey, type, value, title, onUpdateValue }) => {
  const [showDialog, setShowDialog] = useState(false);
  const [inputData, setInputData] = useState(value);
  const [currentPassword, setCurrentPassword] = useState("");

  return (
    <>
      <View style={{}}>
        <View style={Style.containerSpaceBetween}>
          <Text style={Fonts({ type: "section" })}>{title}</Text>
          {type === "boolean" ? (
            <Switch
              value={value}
              setValue={(newValue) =>
                onUpdateValue({ key: itemKey, value: newValue })
              }
            />
          ) : (
            <Pressable
              onPress={() => setShowDialog(true)}
              style={[
                Style.containerRow,
                { maxWidth: "50%", justifyContent: "flex-end" },
              ]}
            >
              <Text
                numberOfLines={1}
                style={Fonts({
                  type: "section",
                  style: {
                    opacity: 0.5,
                    textAlign: "right",
                    width: "80%",
                    marginRight: gutters,
                  },
                })}
              >
                {itemKey === "password"
                  ? "********"
                  : itemKey === "language"
                  ? languageOptions[value] || value
                  : value}
              </Text>

              <Image
                source={icons.edit}
                style={Style.iconDefault}
                resizeMode="contain"
              />
            </Pressable>
          )}
        </View>

        <View style={Style.separatorHorizontal} />
      </View>

      <Container
        visible={showDialog}
        blurComponentIOS={
          <BlurView
            style={StyleSheet.absoluteFill}
            blurType="xdark"
            blurAmount={50}
          />
        }
      >
        <Title>{`Changement ${title?.toLowerCase()}`}</Title>

        {["password", "email"].includes(itemKey) && (
          <Input
            label="Mot de passe actuel"
            value={currentPassword}
            onChangeText={(text) => setCurrentPassword(text)}
            keyboardType="visible-password"
            type={"password"}
            containerStyle={{ marginBottom: gutters / 2 }}
          />
        )}
        {itemKey === "language" ? (
          <OptionSelector
            optionTypeList={languageOptions}
            selected={inputData || "fr"}
            setSelected={setInputData}
            containerStyle={{ marginBottom: gutters / 2 }}
            colorMap={{
              fr: { primary: "#F94697", secondary: "#F946971A" },
              en: { primary: "#7023F7", secondary: "#7023F71A" },
              es: { primary: "#FDBA74", secondary: "#FDBA741A" },
              de: { primary: "#60A5FA", secondary: "#60A5FA1A" },
              it: { primary: "#34D399", secondary: "#34D3991A" },
            }}
          />
        ) : (
          <Input
            label={labelOptions[itemKey]}
            value={inputData}
            onChangeText={(text) => setInputData(text)}
            autoCapitalize={
              ["password", "email"].includes(itemKey) ? "none" : "words"
            }
            type={itemKey}
            containerStyle={{ marginBottom: gutters / 2 }}
          />
        )}
        <Button
          label="Valider"
          onPress={() => {
            onUpdateValue({ key: itemKey, value: inputData, currentPassword });
            setShowDialog(false);
          }}
        />
        <Button
          label="Annuler"
          onPress={() => setShowDialog(false)}
          type={"secondary"}
        />
      </Container>
    </>
  );
};