import {
  ActionIcon,
  AlertDefaultSystem,
  BadgeCustom,
  BaseBox,
  DrawerCustom,
  MenuDrawerDynamicGrid,
  Spacing,
  StackCustom,
  TextCustom,
  ViewWrapper,
} from "@/components";
import { IconDot, IconView } from "@/components/_Icon/IconComponent";
import { IconTrash } from "@/components/_Icon/IconTrash";
import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
import { GridDetail_4_8 } from "@/components/_ShareComponent/GridDetail_4_8";
import { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
import { router } from "expo-router";
import { useState } from "react";
import { Divider } from "react-native-paper";
import Toast from "react-native-toast-message";

export default function AdminForumReportPosting() {
  const [openDrawerPage, setOpenDrawerPage] = useState(false);
  const [openDrawerAction, setOpenDrawerAction] = useState(false);

  return (
    <>
      <ViewWrapper
        headerComponent={
          <AdminBackButtonAntTitle
            title="Report Posting"
            rightComponent={
              <ActionIcon
                icon={<IconDot size={16} color={MainColor.darkblue} />}
                onPress={() => setOpenDrawerPage(true)}
              />
            }
          />
        }
      >
        <BaseBox>
          <StackCustom gap={"sm"}>
            {listData.map((item, i) => (
              <GridDetail_4_8
                key={i}
                label={<TextCustom bold>{item.label}</TextCustom>}
                value={<TextCustom>{item.value}</TextCustom>}
              />
            ))}
            <TextCustom bold>Posting</TextCustom>
            <TextCustom>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Asperiores cupiditate nobis dignissimos explicabo quo unde dolorum
              numquam eos ab laborum fugiat illo nam velit quibusdam, maxime
              assumenda aut vero provident!
            </TextCustom>
          </StackCustom>
        </BaseBox>

        <AdminComp_BoxTitle title="Daftar Report Posting" />
        <BaseBox>
          <AdminTitleTable
            title1="Aksi"
            title2="Username"
            title3="Kategori Report"
          />
          <Spacing />
          <Divider />
          {Array.from({ length: 5 }).map((_, index) => (
            <AdminTableValue
              key={index}
              value1={
                <ActionIcon
                  icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
                  onPress={() => setOpenDrawerAction(true)}
                />
              }
              value2={<TextCustom truncate={1}>Username username</TextCustom>}
              value3={
                <TextCustom truncate={2} align="center">
                  SPAM
                </TextCustom>
              }
            />
          ))}
        </BaseBox>
      </ViewWrapper>

      <DrawerCustom
        isVisible={openDrawerPage}
        closeDrawer={() => setOpenDrawerPage(false)}
        height={"auto"}
      >
        <MenuDrawerDynamicGrid
          data={[
            {
              icon: <IconTrash />,
              label: "Hapus Posting",
              value: "delete",
              path: "",
              color: MainColor.red,
            },
          ]}
          onPressItem={(item) => {
            AlertDefaultSystem({
              title: "Hapus Posting",
              message: "Apakah Anda yakin ingin menghapus posting ini?",
              textLeft: "Batal",
              textRight: "Hapus",
              onPressRight: () => {
                setOpenDrawerPage(false);
                Toast.show({
                  type: "success",
                  text1: "Posting berhasil dihapus",
                });
                router.back()
              },
            });
          }}
        />
      </DrawerCustom>

      <DrawerCustom
        isVisible={openDrawerAction}
        closeDrawer={() => setOpenDrawerAction(false)}
        height={"auto"}
      >
        {listDataAction.map((item, i) => (
          <GridDetail_4_8
            key={i}
            label={<TextCustom bold>{item.label}</TextCustom>}
            value={<TextCustom>{item.value}</TextCustom>}
          />
        ))}
      </DrawerCustom>
    </>
  );
}

const listData = [
  {
    label: "Username",
    value: "Username",
  },
  {
    label: "Status",
    value: <BadgeCustom color={MainColor.green}>Open</BadgeCustom>,
  },
];

const listDataAction = [
  {
    label: "Username",
    value: "Firman Nusantara",
  },
  {
    label: "Kategori Report",
    value: "SPAM",
  },
  {
    label: "Deskripsi",
    value:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis asperiores quidem deleniti architecto eaque et nostrum, ad consequuntur eveniet quisquam quae voluptatum ducimus! Dolorem nobis modi officia debitis, beatae mollitia.",
  },
];
