import React from 'react';
import { Groups, Lock, Public } from '@mui/icons-material';

import {
  ACCESS_LEVEL_HUB,
  ACCESS_LEVEL_OPTIONS,
  ACCESS_LEVEL_PRIVATE,
  ACCESS_LEVEL_SYNDICATE,
  ACCOUNT_TYPE_SYNDICATION,
} from '../../../constants';

import type { GeneralSizeProp } from '@/mui/types';

import {
  accessLevelSelector,
  accountSelector,
  contentOwnerIsPublicSelector,
} from '@/modules/feeds/Editor/redux/selectors';
import { setAction } from '@/modules/feeds/Editor/redux/slices';

import { useFormSettings } from '@/modules/@common/Form';
import { useAppDispatch, useAppSelector } from '@/modules/@common/store/hooks';
import { MenuItem, Select, Stack, Typography } from '@/mui/components';

import styles from './AccessLevel.module.scss';

type PropTypes = {
  disabled?: boolean;
};

const META_TEXT = {
  [ACCESS_LEVEL_PRIVATE]: 'Only the video owner and people the owner chooses can watch the video',
  [ACCESS_LEVEL_HUB]: 'Only viewers associated with the hub can watch the video',
  [ACCESS_LEVEL_SYNDICATE]: 'Video is open to all AnyClip users',
};

const META_ICON = {
  [ACCESS_LEVEL_PRIVATE]: Lock,
  [ACCESS_LEVEL_HUB]: Groups,
  [ACCESS_LEVEL_SYNDICATE]: Public,
};

function AccessLevel({ disabled = false }: PropTypes) {
  const dispatch = useAppDispatch();
  const { size } = useFormSettings();

  const accessLevel = useAppSelector(accessLevelSelector);
  const contentOwnerIsPublic = useAppSelector(contentOwnerIsPublicSelector);
  const account = useAppSelector(accountSelector);

  const options = ACCESS_LEVEL_OPTIONS.filter((option) => {
    if (option.value === ACCESS_LEVEL_SYNDICATE) {
      return contentOwnerIsPublic || account?.type === ACCOUNT_TYPE_SYNDICATION;
    }
    return true;
  });
  const MetaIcon = META_ICON[accessLevel];

  return (
    <Stack fullWidth className={styles.Root}>
      <Select
        // placeholder="Select Access Level"
        size={size as GeneralSizeProp}
        value={accessLevel}
        disabled={disabled}
        onChange={(e) =>
          dispatch(
            setAction({
              accessLevel: e.target.value as typeof ACCESS_LEVEL_PRIVATE | typeof ACCESS_LEVEL_HUB,
            }),
          )
        }
      >
        {options.map((option) => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </Select>
      {META_TEXT[accessLevel] && (
        <Stack direction="row" spacing={2} alignItems="flex-start" className={styles.Meta}>
          <MetaIcon fontSize="xSmall" htmlColor="text.secondary" />
          <Typography variant="caption" color="text.secondary" fontWeight={400}>
            {META_TEXT[accessLevel]}
          </Typography>
        </Stack>
      )}
    </Stack>
  );
}

export default AccessLevel;
