import { FeatureButton, NAME, StoreName } from "../const/index";
import isEmpty from "../utils/is-empty";
import { TUIStore } from './index';

export interface IUIDesign {
  updateViewBackgroundUserId: (viewType: 'local' | 'remote') => void;
  hideFeatureButton: (buttonName: FeatureButton) => void;
  setLocalViewBackgroundImage: (url: string) => void;
  setRemoteViewBackgroundImage: (userId: string, url: string) => void;
}

const DEFAULT_LOCAL_USER_ID = '_local_user_id';

export class UIDesign implements IUIDesign {
  static instance: IUIDesign;
  static getInstance() {
    if (!UIDesign.instance) {
      UIDesign.instance = new UIDesign();
    }
    return UIDesign.instance;
  }

  private _viewConfig = {
    viewBackground: {
      local: {},
      remote: {},
    }
  };
  private _isSetViewBackgroundConfig = { remote: false, local: false };
  private _updateViewBackground() {
    const customUIConfig = TUIStore.getData(StoreName.CALL, NAME.CUSTOM_UI_CONFIG);
    const { userId } = TUIStore.getData(StoreName.CALL, NAME.LOCAL_USER_INFO);

    if (Object.keys(this._viewConfig.viewBackground.remote).includes(userId)) {
      delete this._viewConfig.viewBackground.remote[userId];
    }

    TUIStore.update(
      StoreName.CALL,
      NAME.CUSTOM_UI_CONFIG,
      {
        ...customUIConfig,
        viewBackground: {
          ...this._viewConfig.viewBackground.remote,
          ...this._viewConfig.viewBackground.local,
        },
      },
    );
  }

  public updateViewBackgroundUserId(name) {
    if (name === 'local') {
      const { userId } = TUIStore.getData(StoreName.CALL, NAME.LOCAL_USER_INFO);

      if (Object.keys(this._viewConfig.viewBackground.remote).includes(userId)) {
        delete this._viewConfig.viewBackground.remote[userId];
        this._updateViewBackground();
      }

      if (!this._isSetViewBackgroundConfig.local) {
        return;
      }

      const localViewBackgroundConfig = this._viewConfig.viewBackground.local;
      const url = localViewBackgroundConfig[userId] || localViewBackgroundConfig[DEFAULT_LOCAL_USER_ID];
      localViewBackgroundConfig[userId] = localViewBackgroundConfig[DEFAULT_LOCAL_USER_ID];
      this._viewConfig.viewBackground.local = { [userId]: url };

      this._updateViewBackground();
    } else {
      let remoteViewBackgroundConfig = this._viewConfig.viewBackground.remote;

      if (this._isSetViewBackgroundConfig.remote && Object.keys(remoteViewBackgroundConfig).includes('*')) {
        const remoteUserInfoList = TUIStore.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_LIST);
        const remoteUserIdList = remoteUserInfoList.map((item) => item.userId);
        remoteUserIdList.forEach((userId) => {
          if (!Object.keys(remoteViewBackgroundConfig).includes(userId)) {
            remoteViewBackgroundConfig[userId] = remoteViewBackgroundConfig['*'];
          }
        });

        this._viewConfig.viewBackground.remote = remoteViewBackgroundConfig;
        this._updateViewBackground();
      }
    }
  }
  public hideFeatureButton(buttonName: FeatureButton) {
    const customUIConfig = TUIStore.getData(StoreName.CALL, NAME.CUSTOM_UI_CONFIG);
    TUIStore.update(
      StoreName.CALL,
      NAME.CUSTOM_UI_CONFIG,
      {
        ...customUIConfig,
        button: { ...customUIConfig.button, [buttonName]: false },
      }
    );
  }
  public setLocalViewBackgroundImage(url: string) {
    this._isSetViewBackgroundConfig.local = true;
    let { userId } = TUIStore.getData(StoreName.CALL, NAME.LOCAL_USER_INFO);

    if (isEmpty(userId)) {
      userId = DEFAULT_LOCAL_USER_ID;
    }

    this._viewConfig.viewBackground.local = { [userId]: url };
    this._updateViewBackground();
  }
  public setRemoteViewBackgroundImage(userId: string, url:string) {
    this._isSetViewBackgroundConfig.remote = true;
    if (userId === '*') {
      this._viewConfig.viewBackground.remote = {};
    }

    this._viewConfig.viewBackground.remote[userId] = url;
    this._updateViewBackground();
  }
}