// Metro module 9017 (f9018).
import { useState, useEffect } from "react";
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { NONE } from "../../../utils/PermissionUtils";
import { invert, has } from "../../../_bundle/HighLow";
import { OrderedPermissions, getPermissionName } from "../permissions";
import { Checkbox } from "../../../design/components/Checkbox/native/Checkbox.native";
import { Stack } from "../../../design/components/Stack/native/Stack.native";
import { XSmallIcon } from "../../../design/components/Icon/native/redesign/generated/XSmallIcon";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
const useStyles = createStyles({
  disabledPermissionIcon: {
    width: 24,
    height: 24,
    flexGrow: 0,
    flexShrink: 0,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: Module712.radii.sm,
    backgroundColor: Module712.colors.ICON_FEEDBACK_CRITICAL
  }
});
export default function BotPermissions(props) {
  const { application, permissions, deniedPermissions, onPermissionsChange, guild } = props;
  const styles = useStyles();
  const [state, setState] = useState(NONE);
  useEffect(() => {
    onPermissionsChange(true, permissions);
    setState(invert(guild.permissions));
    onPermissionsChange(false, invert(guild.permissions));
  }, [guild.permissions, onPermissionsChange, permissions]);
  const r43 = OrderedPermissions.filter((orderedPermission) => has(permissions, orderedPermission));
  const r14 = r43.filter((item) => !has(state, item)).map((item) => {
    const permissionName = getPermissionName(item);
    const checked = !has(deniedPermissions, item);
    return <Checkbox key={String(item)} checked={checked} onToggle={(event) => onPermissionsChange(event, item)} label={permissionName} />;
  });
  const r13 = r43.filter((item) => has(state, item)).map((item) => {
    const permissionName = getPermissionName(item);
    return <Stack key={String(item)} direction="horizontal" align="center">
      <View style={styles.disabledPermissionIcon}>
        <XSmallIcon size="sm" color="white" />
      </View>
      <Text variant="text-md/medium">{permissionName}</Text>
    </Stack>;
  });
  return <Stack spacing={16}>
    <Stack>
      <Text variant="text-sm/medium" color="text-subtle">
        {intl.format(t.sOaT2j, {
          applicationName: application.name,
          guildName: guild.name
        })}
      </Text>
      <Stack spacing={12}>{r14}</Stack>
    </Stack>
    {r13.length > 0 ? <Stack>
      <Text variant="text-sm/medium" color="text-subtle">
        {intl.format(t.fsOkF4, {
          applicationName: application.name
        })}
      </Text>
      <Stack spacing={12}>{r13}</Stack>
    </Stack> : null}
  </Stack>;
};