import { useEffect, useState } from 'react';
import { useFormContext } from 'react-hook-form';

import { useCall, useCallStateHooks } from '@stream-io/video-react-sdk';

import {
  IconChevronDown,
  IconScreenShare,
  IconSettings,
} from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuMenu from '@material-hu/components/design-system/Menu';
import HuMenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';
import HuFormRadioButton from '@material-hu/components/design-system/RadioButton/RadioButton/form';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

import { ShareScreenStatus } from 'src/types/stream';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { getContentHint } from '../../../utils';

const ShareScreenControls = () => {
  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
  const { t } = useLokaliseTranslation('livestream');
  const call = useCall();
  const { useScreenShareState } = useCallStateHooks();
  const { screenShare, status } = useScreenShareState();
  const { watch } = useFormContext();

  const { screenShareContentHint } = watch();

  useEffect(() => {
    const contentHint = getContentHint(screenShareContentHint);
    call?.screenShare.setSettings({ contentHint });
  }, [
    screenShareContentHint.default,
    screenShareContentHint.motion,
    screenShareContentHint.text,
    screenShareContentHint.detail,
  ]);

  const shareScreenOptions = [
    {
      name: 'screenShareContentHint.default',
      label: t('CONTENT_HINT_DEFAULT'),
      description: t('CONTENT_HINT_DEFAULT_DESCRIPTION'),
    },
    {
      name: 'screenShareContentHint.motion',
      label: t('CONTENT_HINT_MOTION'),
      description: t('CONTENT_HINT_MOTION_DESCRIPTION'),
    },
    {
      name: 'screenShareContentHint.text',
      label: t('CONTENT_HINT_TEXT'),
      description: t('CONTENT_HINT_TEXT_DESCRIPTION'),
    },
    {
      name: 'screenShareContentHint.detail',
      label: t('CONTENT_HINT_DETAIL'),
      description: t('CONTENT_HINT_DETAIL_DESCRIPTION'),
    },
  ];

  const isContentHintChangeDisabled = status === ShareScreenStatus.ENABLED;

  return (
    <Stack sx={{ flexDirection: 'row', alignItems: 'center', mt: 2, gap: 1 }}>
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 0.5,
        }}
      >
        <HuTooltip
          description={t('CONTENT_HINT_DISABLED_TOOLTIP')}
          disableTooltip={!isContentHintChangeDisabled}
        >
          <Stack>
            <Button
              variant="tertiary"
              size="large"
              onClick={event => setAnchorEl(event.currentTarget)}
              disabled={isContentHintChangeDisabled}
              sx={{ gap: 0.5, minWidth: 'unset', px: 1.5, py: 2 }}
            >
              <IconSettings size={16} />
              <IconChevronDown size={16} />
            </Button>
          </Stack>
        </HuTooltip>
        <HuMenu
          open={Boolean(anchorEl)}
          anchorEl={anchorEl}
          onClose={() => setAnchorEl(null)}
          position="left"
          fixedDimensions={false}
          sx={{
            '& .MuiList-root': {
              py: 0.5,
            },
          }}
        >
          {shareScreenOptions.map(option => (
            <HuMenuItem
              key={option.label}
              sx={{ py: 1.5 }}
            >
              <HuFormRadioButton
                name={option.name}
                radioButtonProps={{
                  label: option.label,
                  description: option.description,
                }}
                isOnlyOption
              />
            </HuMenuItem>
          ))}
        </HuMenu>
      </Stack>
      <Button
        sx={{ flex: 1 }}
        variant="secondary"
        size="large"
        onClick={() => screenShare.toggle()}
        startIcon={<IconScreenShare size={16} />}
      >
        {status === ShareScreenStatus.ENABLED
          ? t('SHARE_STOP')
          : t('SHARE_SCREEN')}
      </Button>
    </Stack>
  );
};

export default ShareScreenControls;