import React, { useCallback } from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SH1 } from '../../common/s-components/typography/s-h1';
import { Router } from '../../common/utils/navigation-service';
import { ROUTE_PARAMS, ROUTES } from '../../app/constants';
import {
  TNotificationCategory,
  TNotificationConfig,
  TState,
  TUpdateNotificationSettings,
} from '../types';

import { BackButton } from '../../common/components/back-button';
import { SCategoryItem } from '../../common/s-components/s-category-item';
import { fp as _ } from '../../common/utils/fp';
import { Switch } from '../../common/components/switch';
import { RefreshableView } from '../../common/components/refreshable-view';
import { Line } from '../../common/components/line';
import { useNotificationSettings } from '../hooks/useNotificationSettings';
import { useRoutingParams } from '../../common/hooks/use-routing-params';
import { useStateLockedOnFocus } from '../../common/hooks/use-state-locked-on-focus';
import { SECTION_VARIANT } from '../constants';
import { TVendor } from '../../common/types';
import {
  addSafeArea,
  getStatusBarHeight,
} from '../../common/transducers/transducers.device-dimension';
import { onSettingsCategorySettingsToggle } from '../../analytics';

type TProps = {
  notificationSettings: TState['notificationSettings'];
  updateNotificationSettings: TUpdateNotificationSettings;
};

const maxHeight = addSafeArea(60);
const safeArea = getStatusBarHeight();

export const NotificationSettingsDetails: React.FC<TProps> = () => {
  const { entity, updateNotificationSettings } = useNotificationSettings();
  const routeParams = useRoutingParams();
  const variant = _.path(
    [ROUTE_PARAMS.notificationSettingsDetailsVariant],
    routeParams
  );
  const lockedVariant = useStateLockedOnFocus(variant) as SECTION_VARIANT;
  const categories = _.path(
    ['data', 'data', 'categories'],
    entity
  ) as TNotificationConfig['categories'];
  const valuePath = {
    [SECTION_VARIANT.market]: [],
    [SECTION_VARIANT.starredTracks]: ['starred_tracks'],
    [SECTION_VARIANT.starredPlaylists]: ['starred_playlists'],
    [SECTION_VARIANT.starredCharts]: ['charts'],
  }[lockedVariant];
  const value = _.pathOr({}, valuePath, categories) as TNotificationCategory;

  //
  // useEffect(() => {
  //   const currentNotifications = _.path('data.data.notifications', entity);
  // }, [entity]);

  const renderHeader = useCallback(() => {
    const title = {
      [SECTION_VARIANT.market]: null,
      [SECTION_VARIANT.starredTracks]: 'Starred Tracks',
      [SECTION_VARIANT.starredPlaylists]: 'Starred Playlists',
      [SECTION_VARIANT.starredCharts]: ['Charts'],
    }[lockedVariant];

    return (
      <SBox pt={safeArea} height={maxHeight}>
        <SH1 textAlign="center" pt={20}>
          {title}
        </SH1>
        <SBox position="absolute" top={safeArea + 11} left={16}>
          <BackButton
            testID="notification-settings-details-back-button"
            onPress={() => Router.goBack()}
            fixed
          />
        </SBox>
      </SBox>
    );
  }, [lockedVariant]);

  const renderBody = useCallback(() => {
    const onChange = (vendor: TVendor) => (value: boolean) => {
      const path = {
        [SECTION_VARIANT.market]: null,
        [SECTION_VARIANT.starredTracks]: [
          'categories',
          'starred_tracks',
          vendor,
        ],
        [SECTION_VARIANT.starredPlaylists]: [
          'categories',
          'starred_playlists',
          vendor,
        ],
        [SECTION_VARIANT.starredCharts]: ['categories', 'charts', vendor],
      }[lockedVariant];

      if (lockedVariant === SECTION_VARIANT.starredCharts) {
        onSettingsCategorySettingsToggle({
          category_name: 'Charts',
          setting_name:
            vendor === 'spotify' ? 'Spotify charts' : 'Apple charts',
          setting_status_set: value ? 'On' : 'Off',
        });
      } else {
        onSettingsCategorySettingsToggle({
          category_name:
            lockedVariant === SECTION_VARIANT.starredTracks
              ? 'Starred tracks'
              : 'Starred playlists',
          setting_name: vendor === 'spotify' ? 'Spotify' : 'Apple',
          setting_status_set: value ? 'On' : 'Off',
        });
      }

      updateNotificationSettings(value, path);
    };

    const labelSpotify =
      lockedVariant === SECTION_VARIANT.starredCharts
        ? 'Spotify Daily Top 200 Chart'
        : 'Spotify';
    const labelApple =
      lockedVariant === SECTION_VARIANT.starredCharts
        ? 'Apple Music Top 100 Chart'
        : 'Apple Music';

    return (
      <SBox bg="ebonyClay" flex={1} position="relative" pt={maxHeight}>
        <SBox px={16}>
          <SCategoryItem height={30} />
        </SBox>

        <Line
          label={labelSpotify}
          labelColor="white"
          renderComponent={() => (
            <Switch
              checked={_.path('spotify', value)}
              onChange={onChange('spotify')}
            />
          )}
        />

        <Line
          label={labelApple}
          labelColor="white"
          renderComponent={() => (
            <Switch
              checked={_.path('apple', value)}
              onChange={onChange('apple')}
            />
          )}
        />
      </SBox>
    );
  }, [entity, updateNotificationSettings]);

  return (
    <RefreshableView
      enableScroll={false}
      testID="notificationssettings-refreshable-view"
      renderHeader={renderHeader}
      renderBody={renderBody}
      name={ROUTES.notificationsettings}
      withoutBottomTabNavigator
    />
  );
};