import { BlurView } from "expo-blur";
import React, { useState } from "react";
import { Platform, Text, View } from "react-native";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { background } from "../../assets";
import AppCheckbox from "../../components/AppCheckbox";
import { isWeb } from "../../hooks/useLayoutType";
import Page from "../../layouts/Page";
import { gutters, Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";

const LANGUAGE = ["Anglais", "Français", "Chinois", "Japonais", "Coreen"];

const Language = () => {
  const [selected, setSelected] = useState("Français");

  return (
    <Page
      headerType="NAVIGATE"
      title="Paramètres"
      backgroundImg={background.profileBG}
      contentContainerStyle={{
        paddingBottom: gutters * 4,
      }}
      containerStyle={{
        backgroundColor: isWeb ? "transparent" : "#0000004D",
      }}
    >
      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
        <BlurView
          intensity={Platform.OS !== "ios" ? 10 : 20}
          style={{
            paddingVertical: 10,
            paddingHorizontal: 20,
            backgroundColor: Palette.glass,
            gap: 10,
            borderRadius: 20,
            overflow: "hidden",
          }}
          // experimentalBlurMethod={
          //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
          // }
        >
          <Text
            style={{
              fontSize: 20,
              color: Palette.white,
              fontFamily: FONT_FAMILY.HelveticaNeueMedium,
            }}
          >
            Langue
          </Text>
          <View style={{ gap: 12 }}>
            {LANGUAGE.map((item, index) => (
              <AppCheckbox
                key={index}
                label={item}
                onPress={() => setSelected(item)}
                selected={selected === item}
              />
            ))}
          </View>
        </BlurView>
      </View>
    </Page>
  );
};

export default Language;