import { ActionIcon, Grid, StackCustom, TextCustom } from "@/components";
import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
import { FontAwesome5 } from "@expo/vector-icons";
import { Image } from "expo-image";
import { router } from "expo-router";
import { useState } from "react";
import { View } from "react-native";
import { Divider, Switch } from "react-native-paper";

export default function AdminAppInformation_StickerSection() {
  const [value, setValue] = useState(false);
  return (
    <>
      <Grid>
        <Grid.Col span={3} style={{ alignItems: "center" }}>
          <TextCustom bold>Aksi</TextCustom>
        </Grid.Col>
        <Grid.Col span={3} style={{ alignItems: "center" }}>
          <TextCustom bold>Status</TextCustom>
        </Grid.Col>
        <Grid.Col span={6}>
          <TextCustom bold align="center" >Stiker</TextCustom>
        </Grid.Col>
      </Grid>

      <Divider />

      <StackCustom>
        {listSticker.map((e, i) => (
          <View key={i}>
            <Grid>
              <Grid.Col
                span={3}
                style={{ alignItems: "center", justifyContent: "center" }}
              >
                <ActionIcon
                  icon={
                    <FontAwesome5
                      name="edit"
                      size={ICON_SIZE_BUTTON}
                      color="black"
                    />
                  }
                  onPress={() => {
                    router.push(`/admin/app-information/sticker/${i}`);
                  }}
                />
              </Grid.Col>
              <Grid.Col
                span={3}
                style={{ alignItems: "center", justifyContent: "center" }}
              >
                <Switch
                  value={value}
                  onValueChange={() => {
                    setValue(!value);
                  }}
                  theme={{
                    colors: {
                      primary: MainColor.yellow,
                    },
                  }}
                />
              </Grid.Col>
              <Grid.Col span={6} style={{ justifyContent: "center", alignItems: "center" }}>
                <Image source={e.path} style={{ width: 100, height: 100 }} />
              </Grid.Col>
            </Grid>
            <Divider />
          </View>
        ))}
      </StackCustom>
    </>
  );
}

const listSticker = [
  {
    id: "1",
    label: "Stiker 1",
    value: "sticker 1",
    path: "https://wibu-storage.wibudev.com/api/files/cmb0dkn5700bjbpnnwcfpzxpz",
  },
  {
    id: "2",
    label: "Stiker 2",
    value: "sticker 2",
    path: "https://wibu-storage.wibudev.com/api/files/cmb0djnya00bhbpnn8b2sfpg3",
  },
  {
    id: "3",
    label: "Stiker 3",
    value: "sticker 3",
    path: "https://wibu-storage.wibudev.com/api/files/cmb0dj0o400bfbpnn6hrfa71y",
  },
  {
    id: "4",
    label: "Stiker 4",
    value: "sticker 4",
    path: "https://wibu-storage.wibudev.com/api/files/cmb0d5rdb00abbpnnrbhxrxjz",
  },
  {
    id: "5",
    label: "Stiker 5",
    value: "sticker 5",
    path: "https://wibu-storage.wibudev.com/api/files/cmb0d4j5q00a9bpnn0qpxa0k4",
  },
];