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

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

export const GroupPrivacyPoliciesKeys = Object.keys(GroupPrivacyPolicies);

const PrivacyIcon = ({
  icon,
  disabled,
}: {
  icon: React.ReactNode;
  disabled?: boolean;
}) => (
  <Typography
    variant="globalS"
    sx={{
      color: disabled
        ? 'textColors.neutralTextLighter'
        : 'textColors.neutralText',
      height: '24px',
    }}
  >
    {icon}
  </Typography>
);

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

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

export const GroupApprovalPolicyKeys = Object.keys(GroupApprovalPolicies);

export const CONFIG_HEADER_HEIGHT = 72;
export const CONFIG_SIDEBAR_WIDTH = 280;

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;
export const GROUP_DETAIL_PAGE_BANNER_DIMENSIONS = {
  WIDTH: 690,
  HEIGHT: 230,
};

export enum ConfigurationTool {
  CONFIGURATION = 'CONFIGURATION',
  MANAGE_MEMBERS = 'MANAGE_MEMBERS',
}

export type Steps = Record<
  ConfigurationTool,
  {
    id: ConfigurationTool;
    label: string;
    icon: React.ReactNode;
    Component: React.ComponentType<{
      disabled?: boolean;
      isMultiCompany?: boolean;
    }>;
    disabled?: boolean;
  }
>;