import React from 'react';
import { useObserver } from 'mobx-react-lite';
import { SwapState, SwapType } from 'types/generated/loop_pb';
import { SwapDirection } from 'types/state';
import { lndListChannels } from 'util/tests/sampleData';
import { useStore } from 'store';
import { Channel } from 'store/models';
import ChannelRow, { ChannelRowHeader } from 'components/loop/ChannelRow';

export default {
  title: 'Components/Channel Row',
  component: ChannelRow,
  parameters: { contained: true },
};

const renderStory = (
  channel: Channel,
  options?: {
    ratio?: number;
    active?: boolean;
  },
) => {
  if (options && options.ratio) {
    channel.localBalance = channel.capacity.mul(options.ratio);
    channel.remoteBalance = channel.capacity.mul(1 - options.ratio);
  }
  return useObserver(() => (
    <div style={{ paddingTop: 50 }}>
      <ChannelRowHeader />
      <ChannelRow channel={channel} />
    </div>
  ));
};

export const Good = () => {
  const store = useStore();
  const channel = Channel.create(store, lndListChannels.channelsList[0]);
  return renderStory(channel, { ratio: 0.3 });
};

export const Warn = () => {
  const store = useStore();
  const channel = Channel.create(store, lndListChannels.channelsList[1]);
  return renderStory(channel, { ratio: 0.5 });
};

export const Bad = () => {
  const store = useStore();
  const channel = Channel.create(store, lndListChannels.channelsList[2]);
  return renderStory(channel, { ratio: 0.91 });
};

export const Inactive = () => {
  const store = useStore();
  const channel = Channel.create(store, lndListChannels.channelsList[3]);
  channel.active = false;
  return renderStory(channel);
};

export const Editable = () => {
  const store = useStore();
  const channel = Channel.create(store, lndListChannels.channelsList[4]);
  store.buildSwapView.startSwap();
  return renderStory(channel);
};

export const Selected = () => {
  const store = useStore();
  const channel = Channel.create(store, lndListChannels.channelsList[5]);
  store.buildSwapView.startSwap();
  store.buildSwapView.toggleSelectedChannel(channel.chanId);
  return renderStory(channel);
};

export const Disabled = () => {
  const store = useStore();
  const channel = Channel.create(store, lndListChannels.channelsList[6]);
  store.buildSwapView.startSwap();
  store.buildSwapView.toggleSelectedChannel(channel.chanId);
  store.buildSwapView.setDirection(SwapDirection.OUT);
  return renderStory(channel);
};

export const Dimmed = () => {
  const store = useStore();
  const channel = Channel.create(store, lndListChannels.channelsList[6]);
  store.buildSwapView.startSwap();
  store.buildSwapView.setDirection(SwapDirection.OUT);
  return renderStory(channel);
};

export const LoopingIn = () => {
  const store = useStore();
  const channel = Channel.create(store, lndListChannels.channelsList[0]);
  const swap = store.swapStore.sortedSwaps[0];
  swap.type = SwapType.LOOP_IN;
  swap.state = SwapState.INITIATED;
  store.swapStore.addSwappedChannels(swap.id, [channel.chanId]);
  return renderStory(channel, { ratio: 0.3 });
};

export const LoopingOut = () => {
  const store = useStore();
  const channel = Channel.create(store, lndListChannels.channelsList[0]);
  const swap = store.swapStore.sortedSwaps[0];
  swap.type = SwapType.LOOP_OUT;
  swap.state = SwapState.INITIATED;
  store.swapStore.addSwappedChannels(swap.id, [channel.chanId]);
  return renderStory(channel, { ratio: 0.3 });
};

export const LoopingInAndOut = () => {
  const store = useStore();
  const channel = Channel.create(store, lndListChannels.channelsList[0]);
  const swap1 = store.swapStore.sortedSwaps[0];
  swap1.type = SwapType.LOOP_IN;
  swap1.state = SwapState.INITIATED;
  store.swapStore.addSwappedChannels(swap1.id, [channel.chanId]);
  const swap2 = store.swapStore.sortedSwaps[1];
  swap2.type = SwapType.LOOP_OUT;
  swap2.state = SwapState.INITIATED;
  store.swapStore.addSwappedChannels(swap2.id, [channel.chanId]);
  return renderStory(channel, { ratio: 0.3 });
};