import {
  ChannelKind,
  ChannelType,
  CommunityType,
  PermissionKindEnum,
} from "@openchat/types"
import React from "react"
import { Pressable, View } from "react-native"
import { AppController } from "../../../app/app.globals"
import { useAlert } from "../../../ui-components/alert"
import { useModal } from "../../../ui-components/modal/modal.hook"
import { ChannelGuard } from "../../guards/channel-guard.component"
import { NavigationRef } from "../../../navigation/navigation.hooks"
import { Icon } from "../../../ui-components/icon/icon.component"
import { StyledText } from "../../../ui-components/styled-text/styled-text"
import { ConfirmationModalize } from "../../../ui-components/confirmation-modalize/confirmation-modalize.component"
import { useStyles } from "./community-channel-item-menu-popup.style"

export const CommunityChannelItemMenuPopup = ({
  channel,
  community,
  onDelete,
}: {
  channel: ChannelType
  community: CommunityType
  onDelete: (channel: ChannelType) => void
}) => {
  // ---------------------------------------------------------------------------
  // variables
  // ---------------------------------------------------------------------------
  const styles = useStyles()
  const alert = useAlert()
  const modal = useModal()

  async function toggleArchive() {
    await AppController.channel.update({
      ...channel,
      isArchive: true,
    })
    // if (channel.isArchive === false) {
    //   await AppController.channel.update({
    //     ...channel,
    //     isArchive: true,
    //   })
    // } else {
    //   await AppController.channel.update({
    //     ...channel,
    //     isArchive: false,
    //   })
    // }
  }

  // ---------------------------------------------------------------------------
  return (
    <View style={{ marginBottom: 15 }}>
      {/* --------------------------------------------------------------------------- */}
      {/* COPY LINK */}
      {/* --------------------------------------------------------------------------- */}

      <Pressable
        onPress={() => {
          modal.close()
          alert.open({
            text: "link has been copied",
            mode: "simple",
          })
        }}
        style={({ pressed }) => [
          pressed
            ? { backgroundColor: "#F3F4F7" }
            : { backgroundColor: "white" },
          styles.itemWrapper,
        ]}
      >
        {({ pressed }) => (
          <>
            <View
              style={[
                pressed
                  ? { backgroundColor: "#1B9FFC" }
                  : { backgroundColor: "#F8FAFC" },
                styles.iconWrapper,
              ]}
            >
              <Icon
                name="fal fa-copy"
                height={16}
                width={"100%"}
                fill={pressed ? "#FFF" : "#8592AA"}
              />
            </View>
            <StyledText style={styles.text}>Copy link</StyledText>
          </>
        )}
      </Pressable>

      {/* --------------------------------------------------------------------------- */}
      {/* NOTIFICATIONS */}
      {/* --------------------------------------------------------------------------- */}

      <Pressable
        onPress={() => {
          modal.close()
        }}
        style={({ pressed }) => [
          pressed
            ? { backgroundColor: "#F3F4F7" }
            : { backgroundColor: "white" },
          styles.itemWrapper,
        ]}
      >
        {({ pressed }) => (
          <>
            <View
              style={[
                pressed
                  ? { backgroundColor: "#1B9FFC" }
                  : { backgroundColor: "#F8FAFC" },
                styles.iconWrapper,
              ]}
            >
              <Icon
                name="fal fa-bell"
                height={16}
                width={"100%"}
                fill={pressed ? "#FFF" : "#8592AA"}
              />
            </View>
            <StyledText style={styles.text}>Notifications</StyledText>
          </>
        )}
      </Pressable>

      <ChannelGuard
        communityId={community.id}
        channelId={channel.id}
        permissions={[PermissionKindEnum.editChannels]}
      >
        {/* --------------------------------------------------------------------------- */}
        {/* GENERAL SETTINGS */}
        {/* --------------------------------------------------------------------------- */}

        <Pressable
          onPress={() => {
            modal.close()
            NavigationRef.navigate("ChannelGeneralSettings", {
              channel,
              community,
            })
          }}
          style={({ pressed }) => [
            pressed
              ? { backgroundColor: "#F3F4F7" }
              : { backgroundColor: "white" },
            styles.itemWrapper,
          ]}
        >
          {({ pressed }) => (
            <>
              <View
                style={[
                  pressed
                    ? { backgroundColor: "#1B9FFC" }
                    : { backgroundColor: "#F8FAFC" },
                  styles.iconWrapper,
                ]}
              >
                <Icon
                  name="fal fa-gear"
                  height={16}
                  width={"100%"}
                  fill={pressed ? "#FFF" : "#8592AA"}
                />
              </View>
              <StyledText style={styles.text}>General Settings</StyledText>
            </>
          )}
        </Pressable>

        {/* --------------------------------------------------------------------------- */}
        {/* CHANNEL PERMISSION */}
        {/* --------------------------------------------------------------------------- */}

        <Pressable
          onPress={() => {
            modal.close()
            NavigationRef.navigate("ChannelPermission", {
              communityId: community.id,
              channelId: channel.id,
            })
          }}
          style={({ pressed }) => [
            pressed
              ? { backgroundColor: "#F3F4F7" }
              : { backgroundColor: "white" },
            styles.itemWrapper,
          ]}
        >
          {({ pressed }) => (
            <>
              <View
                style={[
                  pressed
                    ? { backgroundColor: "#1B9FFC" }
                    : { backgroundColor: "#F8FAFC" },
                  styles.iconWrapper,
                ]}
              >
                <Icon
                  name="fal fa-user-gear"
                  height={16}
                  width={"100%"}
                  fill={pressed ? "#FFF" : "#8592AA"}
                />
              </View>
              <StyledText style={styles.text}>Permissions</StyledText>
            </>
          )}
        </Pressable>

        {channel.isPrivate === true && (
          <Pressable
            onPress={() => {
              modal.close()
              NavigationRef.navigate("ChannelAddMemberModal", {
                communityId: community.id,
                channel: channel,
              })
            }}
            style={({ pressed }) => [
              pressed
                ? { backgroundColor: "#F3F4F7" }
                : { backgroundColor: "white" },
              styles.itemWrapper,
            ]}
          >
            {({ pressed }) => (
              <>
                <View
                  style={[
                    pressed
                      ? { backgroundColor: "#1B9FFC" }
                      : { backgroundColor: "#F8FAFC" },
                    styles.iconWrapper,
                  ]}
                >
                  <Icon
                    name="fal fa-user"
                    height={16}
                    width={"100%"}
                    fill={pressed ? "#FFF" : "#8592AA"}
                  />
                </View>
                <StyledText style={styles.text}>Add Member</StyledText>
              </>
            )}
          </Pressable>
        )}

        {/* --------------------------------------------------------------------------- */}
        {/* CHANNEL COVER */}
        {/* --------------------------------------------------------------------------- */}

        {channel.type === ChannelKind.regular && (
          <>
            <Pressable
              onPress={() => {
                modal.close()
                NavigationRef.navigate("ChannelCoverModal", {
                  channel,
                  community,
                })
              }}
              style={({ pressed }) => [
                pressed
                  ? { backgroundColor: "#F3F4F7" }
                  : { backgroundColor: "white" },
                styles.itemWrapper,
              ]}
            >
              {({ pressed }) => (
                <>
                  <View
                    style={[
                      pressed
                        ? { backgroundColor: "#1B9FFC" }
                        : { backgroundColor: "#F8FAFC" },
                      styles.iconWrapper,
                    ]}
                  >
                    <Icon
                      name="fal fa-images"
                      height={16}
                      width={"100%"}
                      fill={pressed ? "#FFF" : "#8592AA"}
                    />
                  </View>
                  <StyledText style={styles.text}>Cover</StyledText>
                </>
              )}
            </Pressable>
          </>
        )}

        {/* --------------------------------------------------------------------------- */}
        {/* ARCHIVE CHANNEL */}
        {/* --------------------------------------------------------------------------- */}

        <Pressable
          // onPress={async () => {
          //   modal.close()
          //   if (channel.isArchive === false) {
          //     await AppController.channel.update({
          //       ...channel,
          //       isArchive: true,
          //     })
          //   } else {
          //     await AppController.channel.update({
          //       ...channel,
          //       isArchive: false,
          //     })
          //   }
          // }}
          onPress={async () => {
            modal.close()
            channel.isArchive === false
              ? modal.open({
                  background: "pattern",
                  scrollEnabled: false,
                  footer: "rgb",
                  component: (
                    <ConfirmationModalize
                      title="Archive Channel"
                      description={
                        <>
                          <StyledText>
                            Are you sure you wanna archive this channel?
                          </StyledText>
                        </>
                      }
                      mainActionText="Archive"
                      onConfirm={() => toggleArchive()}
                    />
                  ),
                  height: 250,
                })
              : await AppController.channel.update({
                  ...channel,
                  isArchive: false,
                })
          }}
          style={({ pressed }) => [
            pressed
              ? { backgroundColor: "#F3F4F7" }
              : { backgroundColor: "white" },
            styles.itemWrapper,
          ]}
        >
          {({ pressed }) => (
            <>
              <View
                style={[
                  pressed
                    ? { backgroundColor: "#1B9FFC" }
                    : { backgroundColor: "#F8FAFC" },
                  styles.iconWrapper,
                ]}
              >
                <Icon
                  name="fal fa-box-archive"
                  height={16}
                  width={"100%"}
                  fill={pressed ? "#FFF" : "#8592AA"}
                />
              </View>
              <StyledText style={styles.text}>
                {channel.isArchive === false
                  ? "Archive channel"
                  : "Unarchive channel"}
              </StyledText>
            </>
          )}
        </Pressable>

        {/* --------------------------------------------------------------------------- */}
        {/* DELETE CHANNEL */}
        {/* --------------------------------------------------------------------------- */}

        <Pressable
          onPress={() => {
            onDelete(channel)
          }}
          style={({ pressed }) => [
            pressed
              ? { backgroundColor: "#F3F4F7" }
              : { backgroundColor: "white" },
            styles.itemWrapper,
          ]}
        >
          {({ pressed }) => (
            <>
              <View
                style={[
                  { backgroundColor: pressed ? "#F35050" : "#F8FAFC" },
                  styles.iconWrapper,
                ]}
              >
                {/* {236 390 154} */}
                <Icon
                  name="fal fa-trash"
                  size={16}
                  fill={pressed ? "#FFF" : "#F35050"}
                />
              </View>
              <StyledText style={{ ...styles.text, color: "#F35050" }}>
                Delete channel
              </StyledText>
            </>
          )}
        </Pressable>
      </ChannelGuard>
    </View>
  )
}
цвета надо брать исключительно из переменных