import { ofType } from 'redux-observable';
import { concat, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';

import { QUERY_PARAM_CHANNEL, QUERY_PARAM_WATCH_ID } from '@/modules/editorial/constants/routing';

import { getWatchesAction } from '../../../Watches/redux/slices';
import * as channelSelectors from '../selectors';
import { clearAction, updateChannelAction, updateStoreByPropAction } from '../slices';
import { removeQueriesAction } from '@/modules/@common/location/redux/slices';
import { gqlRequest } from '@/modules/@common/request';

const queryGQL = `
  mutation UpdateChannel(
    $id: Int!,
    $watchId: Int!,
    $title: String,
    $description: String,
    $bg: String,
    $logo: String,
    $size: String,
    $design: String,
    $titleColor: String,
    $descColor: String,
    $vidTitleColor: String,
    $vidInfoColor: String,
    $cTitleColor: String,
    $cVidTitleColor: String,
    $cVidInfoColor: String,
    $cTitleSize: String,
    $cVidTitleSize: String,
    $cVidInfoSize: String,
    $bgLogo: String,
    $MRSSForExport: Boolean,
    $MRSSAliasDomain: String,
    $MRSSLinkUrl: String,
    $includeSponsoredContent: Boolean,
    $frequency: Int,
    $supplyTagId: String,
    $supplyTagName: String,
  ) {
    updateChannel(
      id: $id,
      watchId: $watchId,
      title: $title,
      description: $description,
      bg: $bg,
      logo: $logo,
      size: $size,
      design: $design,
      titleColor: $titleColor,
      descColor: $descColor,
      vidTitleColor: $vidTitleColor,
      vidInfoColor: $vidInfoColor,
      cTitleColor: $cTitleColor,
      cVidTitleColor: $cVidTitleColor,
      cVidInfoColor: $cVidInfoColor,
      cTitleSize: $cTitleSize,
      cVidTitleSize: $cVidTitleSize,
      cVidInfoSize: $cVidInfoSize,
      bgLogo: $bgLogo,
      MRSSForExport: $MRSSForExport,
      MRSSAliasDomain: $MRSSAliasDomain,
      MRSSLinkUrl: $MRSSLinkUrl,
      includeSponsoredContent: $includeSponsoredContent,
      frequency: $frequency,
      supplyTagId: $supplyTagId,
      supplyTagName: $supplyTagName,
    ) {
      id
      watchId
      order
      videoFilterId
      playlistId
      title
      name
      description
      bg
      logo
      size
      design
      titleColor
      descColor
      vidTitleColor
      vidInfoColor
      cTitleColor
      cVidTitleColor
      cVidInfoColor
      cTitleSize
      cVidTitleSize
      cVidInfoSize
      bgLogo
      updatedBy
      updatedAt
      createdBy
      createdAt
      MRSSForExport
      MRSSAliasDomain
      MRSSLinkUrl
    }
  }
`;

export default (action$, state$) =>
  action$.pipe(
    ofType(updateChannelAction.type),
    switchMap(({ payload: { watchId, id } }) => {
      const stream$ = gqlRequest({
        query: queryGQL,
        variables: {
          watchId,
          id,
          logo: channelSelectors.logoSelector(state$.value),
          title: channelSelectors.titleSelector(state$.value),
          description: channelSelectors.descriptionSelector(state$.value),
          size: channelSelectors.sizeSelector(state$.value),
          design: channelSelectors.designSelector(state$.value),
          bg: channelSelectors.bgSelector(state$.value),
          titleColor: channelSelectors.titleColorSelector(state$.value),
          descColor: channelSelectors.descColorSelector(state$.value),
          vidTitleColor: channelSelectors.vidTitleColorSelector(state$.value),
          vidInfoColor: channelSelectors.vidInfoColorSelector(state$.value),
          cTitleColor: channelSelectors.cTitleColorSelector(state$.value),
          cVidTitleColor: channelSelectors.cVidTitleColorSelector(state$.value),
          cVidInfoColor: channelSelectors.cVidInfoColorSelector(state$.value),
          cTitleSize: channelSelectors.cTitleSizeSelector(state$.value),
          cVidTitleSize: channelSelectors.cVidTitleSizeSelector(state$.value),
          cVidInfoSize: channelSelectors.cVidInfoSizeSelector(state$.value),
          bgLogo: channelSelectors.bgLogoSelector(state$.value),
          MRSSForExport: channelSelectors.mrssForExportSelector(state$.value),
          MRSSAliasDomain: channelSelectors.mrssAliasDomainSelector(state$.value),
          MRSSLinkUrl: channelSelectors.mrssLinkUrlSelector(state$.value),
          includeSponsoredContent: channelSelectors.includeSponsoredContentSelector(state$.value),
          frequency: parseInt(channelSelectors.frequencySelector(state$.value), 10),
          supplyTagId: channelSelectors.supplyTagSelector(state$.value)?.id,
          supplyTagName: channelSelectors.supplyTagSelector(state$.value)?.name,
        },
      }).pipe(
        switchMap(({ errors }) => {
          const actions = [];

          if (!errors.length) {
            actions.push(
              of(clearAction()),
              of(getWatchesAction()),
              of(removeQueriesAction([QUERY_PARAM_WATCH_ID, QUERY_PARAM_CHANNEL])),
            );
          }

          return concat(...actions);
        }),
      );

      return concat(
        of(updateStoreByPropAction({ isLoading: true })),
        stream$,
        of(updateStoreByPropAction({ isLoading: false })),
      );
    }),
  );
