import { IconBan, IconEye, IconLock } from '@material-hu/icons/tabler';
import { Typography } from '@material-hu/mui/index';

import {
  GroupApprovalPolicies,
  GroupPrivacyPolicies,
  GroupPublicationPolicies,
} from 'src/types/groups';

export const GroupPrivacyPoliciesKeys = Object.keys(GroupPrivacyPolicies);

export const GroupPublicationPoliciesKeys = Object.keys(
  GroupPublicationPolicies,
);

export const GroupAprovalPolicyKeys = Object.keys(GroupApprovalPolicies);

const PrivacyIcon = ({
  icon,
  disabled,
}: {
  icon: React.ReactNode;
  disabled?: boolean;
}) => (
  <Typography
    variant="globalS"
    sx={{
      color: disabled
        ? (theme: any) => theme.palette.new.text.neutral.lighter
        : (theme: any) => theme.palette.new.text.neutral.default,
      height: '24px',
    }}
  >
    {icon}
  </Typography>
);

export const getPrivacyIcon = (
  type: GroupPrivacyPolicies,
  disabled?: boolean,
): React.ReactNode => {
  const icons: Record<GroupPrivacyPolicies, React.ReactNode> = {
    OPEN: (
      <PrivacyIcon
        icon={<IconEye />}
        disabled={disabled}
      />
    ),
    CLOSE: (
      <PrivacyIcon
        icon={<IconBan />}
        disabled={disabled}
      />
    ),
    SECRET: (
      <PrivacyIcon
        icon={<IconLock />}
        disabled={disabled}
      />
    ),
  };
  return icons[type];
};

export enum GroupMailNotificationSettings {
  ON = 'ON',
  OFF = 'OFF',
}

export const GROUP_MANAGEMENT_HEADER_HEIGHT = 72;
export const GROUP_MANAGEMENT_SIDEBAR_WIDTH = 280;
export const GROUP_MANAGEMENT_ICON_SIZE = 30;
export const GROUP_MANAGEMENT_FOOTER_HEIGHT = 78;
export const GROUP_MANAGEMENT_MAX_CONTENT_WIDTH = 1200;