<script>
  import Widget from '@/components/widgets/Widget';
  import TabWidget from '@/store/models/tab/TabWidget';
  import VolumeInspectorProfile from './VolumeInspectorProfile';
  import VolumeInspectorRatios from './VolumeInspectorRatios';
  import BaseChip from '../../base/BaseChip';
  import VolumeInspectorStream from './VolumeInspectorStream';
  import BaseIconButton from '../../base/BaseIconButton';
  import TradeFlowSettings from '../../../store/models/widget/TradeFlowSettings';
  import BaseMenu from '../../base/BaseMenu';
  import BaseCheckbox from '../../base/BaseCheckbox';
  import BaseDropdown from '../../base/BaseDropdown';
  import TextfieldOutline from '../../base/TextfieldOutline';
  import BaseButton from '../../base/BaseButton';
  import BaseIcon from '../../base/BaseIcon';
  import AppIcon from '../../app/AppIcon';
  import NumberfieldOutline from '../../base/NumberfieldOutline';
  import TabInformation from '../../mixins/TabInformation';
  import TimeFilter from '@/store/models/filter/TimeFilter';
  import {combineLatest,of, ReplaySubject} from 'rxjs'
  import {debounceTime, distinctUntilChanged, filter,  map, pluck, tap, share, toPromise, startWith, switchMap, mergeAll, scan} from 'rxjs/operators'
  import VolumeInspectorSetting from '@/store/models/widget/VolumeInspectorSetting';
  import VolumeRatioPivot from '@/store/models/widget/TradeFlow/VolumeRatioPivot';

  export default {
    name: 'VolumeInspectorWidget',
    mixins: [TabInformation],
    components: {
      AppIcon,
      BaseDropdown,
      NumberfieldOutline,
      BaseIcon,
      BaseButton,
      Widget,
      BaseMenu,
      BaseChip,
      BaseCheckbox,
      BaseIconButton,
      TextfieldOutline,
      VolumeInspectorStream,
      VolumeInspectorRatios,
      VolumeInspectorProfile,
    },
    props: {
      widgetID: Number,
    },

    data() {
      return {
        ratios: {},
        subscription: null,
        setWhaleSize: false,
        whaleSize: 10000,
        totals1: {buys: {volume: 0}, sells: {volume: 0}},
        totals5: {buys: {volume: 0}, sells: {volume: 0}},
        totals15: {buys: {volume: 0}, sells: {volume: 0}},
        totals30: {buys: {volume: 0}, sells: {volume: 0}},
        totals60: {buys: {volume: 0}, sells: {volume: 0}},
        totals24H: {buys: {volume: 0}, sells: {volume: 0}},
        profile: {buys: {volume: 0}, sells: {volume: 0}, avg_buy: 0, total_volume: 0, avg_sell:0, buy_volume: 0, sell_volume:0, average: 0},
        totals: {buys: {volume: 0}, sells: {volume: 0}},
        filterBySize: false,
        filterSize: 10000,
        filter$: 60,
        expandedPreferences: false,
        onlyWhale: false,
        panel: [],
        data: [],
        ratios$: {},
        timeFilterRatios: [60, 300, 900, 1800, 3600, 86400]
      };
    },

    computed: {
      timeFilters() {
        return this.activeTab.volume_pivot ||[];
      },
      filtered() {
        return [
          this.timeFilters[0].enabled ? this.ratios$[60] : null,
          this.timeFilters[1].enabled ? this.ratios$[300] : null,
          this.timeFilters[2].enabled ? this.ratios$[900] : null,
          this.timeFilters[3].enabled ? this.ratios$[1800] : null,
          this.timeFilters[4].enabled ? this.ratios$[3600] : null,
          this.timeFilters[5].enabled ? this.ratios$[86400] : null,
        ];
      },
      filter() {
        return TimeFilter.query().where('id', this.volumeInspectorSettings.time_filter_id).first();
      },
      volumeInspectorSettings() {
        return (
            VolumeInspectorSetting.query().where('tab_id', this.activeTabId).first() || {}
        );
      },
      widget() {
        return TabWidget.find(this.widgetID);
      },
    },

    methods: {
      saveStreamSettings() {
        VolumeInspectorSetting.$update({
          params: {
            id: this.volumeInspectorSettings.id,
          },
          data: {
            filter_amount: this.volumeInspectorSettings.filter_amount,
            filter_enabled: this.volumeInspectorSettings.filter_enabled,
            whale_trade_amount: this.volumeInspectorSettings.whale_trade_amount,
            whale_trade_enabled: this.volumeInspectorSettings.whale_trade_enabled,
            only_whale_trades: this.volumeInspectorSettings.only_whale_trades
          },
        });
      },
      togglePreferences($e) {
        this.expandedPreferences = $e;
      },
      toggleRatioVisibility(key, filter) {
        this.getRatios();

        VolumeRatioPivot.$update({
          params: {id: filter.id},
          data: {
            enabled: !this.timeFilters[key].enabled,
          },
        });
      },
      toggleWhaleTrade() {
        TradeFlowSettings.$update({
          params: {id: this.volumeInspectorSettings.id},
          data: {
            only_whale_trades: !this.volumeInspectorSettings.only_whale_trades,
            filter_amount: this.volumeInspectorSettings.filter_amount,
            filter_enabled: this.volumeInspectorSettings.filter_enabled,
            whale_trade_amount: this.volumeInspectorSettings.whale_trade_amount,
            whale_trade_enabled: this.volumeInspectorSettings.whale_trade_enabled
          },
        });
      },
      updateVolumeSetting(key, $e) {
        VolumeInspectorSetting.$update({
          params: {
            id: this.volumeInspectorSettings.id,
          },
          data: {
            [key]: $e,
          },
        });
      },
      getRatios() {
        let ratios = {};
        this.timeFilters.map(value => {
          ratios[value.time_filter.amount] = value.enabled;
        });
        this.ratios = ratios;
      },
      setFilter(filter) {
        TradeFlowSettings.$update({
          params: {id: this.volumeInspectorSettings.id},
          data: {time_filter_id: filter.time_filter_id},
        });
      },
    },

    mounted() {
      const symbol$ = this.$watchAsObservable('activeSymbol').pipe(startWith({newValue: this.activeSymbol}), pluck('newValue'),debounceTime(1000), distinctUntilChanged())

      let symbols = ['XBTUSD', 'ETHUSD'];
      let ratios$ = {}
      symbols.forEach((symbol) => {
        ratios$[symbol] = {}
        //const timeFilters = [60,3600]
        this.timeFilters.forEach((ratio) => {
          ratios$[symbol][ratio] = this.$echo.getVolumeInspectorUpdatedEvents(symbol, ratio, 1)
        });
      })
      const filteredRatios$ = this.$watchAsObservable('timeFilters').pipe(switchMap((res) => {
            console.log('r', res)
            let observableArray = []
            res.map((filter) => {
              if (filter.enabled) {
                observableArray.push(ratios$['XBTUSD'][filter.time_filter.seconds])
              }
            })
            return combineLatest(...observableArray)
          }),
          mergeAll(),
          tap(console.log),
          scan((acc, curr) => {
                if(!curr) return acc;
                if (curr.time_filter_seconds || false) {
                  return {...acc, [curr.time_filter_seconds]: curr.stats}
                } else
                  return acc
              }, {}
          )
      )
      filteredRatios$.subscribe((res) => console.log(res))
    }
  };
</script>