import React, { useState, useRef, useContext, useEffect } from 'react';
import { findDOMNode } from 'react-dom';
import { defineMessages, injectIntl } from 'react-intl';
import PropTypes from 'prop-types';
import Styled from './styles';
import {
  EFFECT_TYPES,
  BLUR_FILENAME,
  IMAGE_NAMES,
  getVirtualBackgroundThumbnail,
  isVirtualBackgroundSupported,
} from '/imports/ui/services/virtual-background/service';
import { CustomVirtualBackgroundsContext } from './context';
import VirtualBgService from '/imports/ui/components/video-preview/virtual-background/service';

const propTypes = {
  intl: PropTypes.shape({
    formatMessage: PropTypes.func.isRequired,
  }).isRequired,
  handleVirtualBgSelected: PropTypes.func.isRequired,
  locked: PropTypes.bool.isRequired,
  showThumbnails: PropTypes.bool,
  initialVirtualBgState: PropTypes.shape({
    type: PropTypes.string.isRequired,
    name: PropTypes.string,
  }),
};

const intlMessages = defineMessages({
  virtualBackgroundSettingsLabel: {
    id: 'app.videoPreview.webcamVirtualBackgroundLabel',
    description: 'Label for the virtual background',
  },
  virtualBackgroundSettingsDisabledLabel: {
    id: 'app.videoPreview.webcamVirtualBackgroundDisabledLabel',
    description: 'Label for the unsupported virtual background',
  },
  noneLabel: {
    id: 'app.video.virtualBackground.none',
    description: 'Label for no virtual background selected',
  },
  customLabel: {
    id: 'app.video.virtualBackground.custom',
    description: 'Label for custom virtual background selected',
  },
  removeLabel: {
    id: 'app.video.virtualBackground.remove',
    description: 'Label for remove custom virtual background',
  },
  blurLabel: {
    id: 'app.video.virtualBackground.blur',
    description: 'Label for the blurred camera option',
  },
  camBgAriaDesc: {
    id: 'app.video.virtualBackground.camBgAriaDesc',
    description: 'Label for virtual background button aria',
  },
  background: {
    id: 'app.video.virtualBackground.background',
    description: 'Label for the background word',
  },
  backgroundWithIndex: {
    id: 'app.video.virtualBackground.backgroundWithIndex',
    description: 'Label for the background word indexed',
  },
  ...IMAGE_NAMES.reduce((prev, imageName) => {
    const id = imageName.split('.').shift();
    return {
      ...prev,
      [id]: {
        id: `app.video.virtualBackground.${id}`,
        description: `Label for the ${id} camera option`,
        defaultMessage: '{background} {index}',
      },
    };
  }, {})
});

const VirtualBgSelector = ({
  intl,
  handleVirtualBgSelected,
  locked,
  showThumbnails,
  initialVirtualBgState,
  isVisualEffects,
}) => {
  const [currentVirtualBg, setCurrentVirtualBg] = useState({
    ...initialVirtualBgState,
  });

  const inputElementsRef = useRef([]);
  const customBgSelectorRef = useRef(null);

  const {
    dispatch,
    loaded,
    customBackgrounds,
    newCustomBackgrounds,
    loadFromDB,
  } = useContext(CustomVirtualBackgroundsContext);

  const { MIME_TYPES_ALLOWED } = VirtualBgService;

  useEffect(() => {
    if (!loaded && isVisualEffects) loadFromDB();
  }, []);

  const _virtualBgSelected = (type, name, index, customParams) =>
    handleVirtualBgSelected(type, name, customParams)
      .then(switched => {
        // Reset to the base NONE_TYPE effect if it failed because the expected
        // behaviour from upstream's method is to actually stop/reset the effect
        // service if it fails
        if (!switched) {
          return setCurrentVirtualBg({ type: EFFECT_TYPES.NONE_TYPE });
        }

        if (index >= 0) {
          findDOMNode(inputElementsRef.current[index]).focus();
        }
        return setCurrentVirtualBg({ type, name });
      });

  const renderDropdownSelector = () => {
    const disabled = locked || !isVirtualBackgroundSupported();

    return (
      <div>
        <Styled.Select
          value={JSON.stringify(currentVirtualBg)}
          disabled={disabled}
          onChange={event => {
            const { type, name } = JSON.parse(event.target.value);
            _virtualBgSelected(type, name);
          }}
        >
          <option value={JSON.stringify({ type: EFFECT_TYPES.NONE_TYPE })}>
            {intl.formatMessage(intlMessages.noneLabel)}
          </option>

          <option value={JSON.stringify({ type: EFFECT_TYPES.BLUR_TYPE })}>
            {intl.formatMessage(intlMessages.blurLabel)}
          </option>

          {IMAGE_NAMES.map((imageName, i) => {
            const k = `${imageName}-${i}`;
            return (
              <option key={k} value={JSON.stringify({
                type: EFFECT_TYPES.IMAGE_TYPE,
                name: imageName,
              })}>
                {imageName.split(".")[0]}
              </option>
            );
          })}
        </Styled.Select>
      </div>
    );
  }

  const handleCustomBgChange = (event) => {
    const file = event.target.files[0];
    const { readFile } = VirtualBgService;

    readFile(
      file,
      (background) => {
        dispatch({
          type: 'new',
          background,
        });
      },
      (error) => {
        // Add some logging, notification, etc.
      }
    );
  }

  const renderThumbnailSelector = () => {
    const disabled = locked || !isVirtualBackgroundSupported();

    return (
      <Styled.VirtualBackgroundRowThumbnail>
        <Styled.BgWrapper
          role="group"
          aria-label={intl.formatMessage(intlMessages.virtualBackgroundSettingsLabel)}
          isVisualEffects={isVisualEffects}
        >
          <>
            <Styled.BgNoneButton
              icon='close'
              label={intl.formatMessage(intlMessages.noneLabel)}
              aria-pressed={currentVirtualBg?.name === undefined}
              aria-describedby={`vr-cam-btn-none`}
              hideLabel
              tabIndex={disabled ? -1 : 0}
              disabled={disabled}
              onClick={() => _virtualBgSelected(EFFECT_TYPES.NONE_TYPE)}
              isVisualEffects={isVisualEffects}
            />
            <div aria-hidden className="sr-only" id={`vr-cam-btn-none`}>
              {intl.formatMessage(intlMessages.camBgAriaDesc, { 0: EFFECT_TYPES.NONE_TYPE })}
            </div>
          </>

          <Styled.ThumbnailButtonWrapper isVisualEffects={isVisualEffects}>
            <Styled.ThumbnailButton
              background={getVirtualBackgroundThumbnail(BLUR_FILENAME)}
              aria-label={intl.formatMessage(intlMessages.blurLabel)}
              label={intl.formatMessage(intlMessages.blurLabel)}
              aria-describedby={`vr-cam-btn-blur`}
              tabIndex={disabled ? -1 : 0}
              hideLabel
              aria-pressed={currentVirtualBg?.name?.includes('blur') || currentVirtualBg?.name?.includes('Blur')}
              disabled={disabled}
              ref={ref => { inputElementsRef.current[0] = ref; }}
              onClick={() => _virtualBgSelected(EFFECT_TYPES.BLUR_TYPE, 'Blur', 0)}
              isVisualEffects={isVisualEffects}
            />
            <div aria-hidden className="sr-only" id={`vr-cam-btn-blur`}>
              {intl.formatMessage(intlMessages.camBgAriaDesc, { 0: EFFECT_TYPES.BLUR_TYPE })}
            </div>
          </Styled.ThumbnailButtonWrapper>

          {IMAGE_NAMES.map((imageName, index) => {
            const label = intl.formatMessage(intlMessages[imageName.split('.').shift()], {
              index: index + 2,
              background: intl.formatMessage(intlMessages.background),
            });

            return (
              <Styled.ThumbnailButtonWrapper
                key={`${imageName}-${index}`}
                isVisualEffects={isVisualEffects}
              >
                <Styled.ThumbnailButton
                  id={`${imageName}-${index}`}
                  label={label}
                  tabIndex={disabled ? -1 : 0}
                  role="button"
                  aria-label={label}
                  aria-describedby={`vr-cam-btn-${index}`}
                  aria-pressed={currentVirtualBg?.name?.includes(imageName.split('.').shift())}
                  hideLabel
                  ref={ref => inputElementsRef.current[index + 1] = ref}
                  onClick={() => _virtualBgSelected(EFFECT_TYPES.IMAGE_TYPE, imageName, index + 1)}
                  disabled={disabled}
                  isVisualEffects={isVisualEffects}
                  background={getVirtualBackgroundThumbnail(imageName)}
                />
                <div aria-hidden className="sr-only" id={`vr-cam-btn-${index}`}>
                  {intl.formatMessage(intlMessages.camBgAriaDesc, { 0: label })}
                </div>
              </Styled.ThumbnailButtonWrapper>
            )
          })}

          {isVisualEffects && customBackgrounds
            .concat(newCustomBackgrounds)
            .map(({ filename, data, uniqueId }, index) => {
              const imageIndex = index + IMAGE_NAMES.length + 2;
              const label = intl.formatMessage(intlMessages.backgroundWithIndex, {
                0: imageIndex,
              });

              return (
                <Styled.ThumbnailButtonWrapper
                  key={`${filename}-${index}`}
                  isVisualEffects={isVisualEffects}
                >
                  <Styled.ThumbnailButton
                    id={`${filename}-${imageIndex}`}
                    label={label}
                    tabIndex={disabled ? -1 : 0}
                    role="button"
                    aria-label={label}
                    aria-describedby={`vr-cam-btn-${imageIndex}`}
                    aria-pressed={currentVirtualBg?.name?.includes(filename)}
                    hideLabel
                    ref={ref => inputElementsRef.current[index + IMAGE_NAMES.length + 1] = ref}
                    onClick={() => _virtualBgSelected(
                      EFFECT_TYPES.IMAGE_TYPE,
                      filename,
                      imageIndex - 1,
                      { file: data },
                    )}
                    disabled={disabled}
                    isVisualEffects={isVisualEffects}
                    background={data}
                  />
                  <Styled.ButtonWrapper>
                    <Styled.ButtonRemove
                      label={intl.formatMessage(intlMessages.removeLabel)}
                      aria-label={intl.formatMessage(intlMessages.removeLabel)}
                      data-test="removeCustomBackground"
                      icon="close"
                      size="sm"
                      color="dark"
                      circle
                      hideLabel
                      onClick={() => {
                        dispatch({
                          type: 'delete',
                          uniqueId,
                        });
                      }}
                    />
                  </Styled.ButtonWrapper>
                  <div aria-hidden className="sr-only" id={`vr-cam-btn-${imageIndex}`}>
                    {label}
                  </div>
                </Styled.ThumbnailButtonWrapper>
              );
            })}

          {isVisualEffects && (
            <>
              <Styled.BgCustomButton
                icon='plus'
                label={intl.formatMessage(intlMessages.customLabel)}
                aria-describedby={`vr-cam-btn-custom`}
                hideLabel
                tabIndex={disabled ? -1 : 0}
                disabled={disabled}
                onClick={() => {
                  if (customBgSelectorRef.current) {
                    customBgSelectorRef.current.click();
                  }
                }}
                isVisualEffects={isVisualEffects}
              />
              <input
                ref={customBgSelectorRef}
                type="file"
                id="customBgSelector"
                onChange={handleCustomBgChange}
                style={{ display: 'none' }}
                accept={MIME_TYPES_ALLOWED.join(', ')}
              />
              <div aria-hidden className="sr-only" id={`vr-cam-btn-custom`}>
                {intl.formatMessage(intlMessages.customLabel)}
              </div>
            </>
          )}
        </Styled.BgWrapper>
      </Styled.VirtualBackgroundRowThumbnail>
    );
  };

  const renderSelector = () => {
    if (showThumbnails) return renderThumbnailSelector();
    return renderDropdownSelector();
  };

  return (
    <>
      {!isVisualEffects && (
        <Styled.Label>
          {!isVirtualBackgroundSupported()
            ? intl.formatMessage(intlMessages.virtualBackgroundSettingsDisabledLabel)
            : intl.formatMessage(intlMessages.virtualBackgroundSettingsLabel)}
        </Styled.Label>
      )}

      {renderSelector()}
    </>
  );
};

VirtualBgSelector.propTypes = propTypes;
VirtualBgSelector.defaultProps = {
  showThumbnails: false,
  initialVirtualBgState: {
    type: EFFECT_TYPES.NONE_TYPE,
  },
};

export default injectIntl(VirtualBgSelector);