// @flow
import * as ICONS from 'constants/icons';
import React, { useEffect } from 'react';
import ClaimList from 'component/claimList';
import Page from 'component/page';
import Button from 'component/button';
import YoutubeTransferStatus from 'component/youtubeTransferStatus';
import Spinner from 'component/spinner';
import Card from 'component/common/card';
import Yrbl from 'component/yrbl';
import * as PAGES from 'constants/pages';

type Props = {
  channels: Array<ChannelClaim>,
  channelUrls: Array<string>,
  fetchChannelListMine: () => void,
  fetchingChannels: boolean,
  youtubeChannels: ?Array<any>,
};

export default function ChannelsPage(props: Props) {
  const { channels, channelUrls, fetchChannelListMine, fetchingChannels, youtubeChannels } = props;
  const hasYoutubeChannels = youtubeChannels && Boolean(youtubeChannels.length);
  const hasPendingChannels = channels && channels.some(channel => channel.confirmations < 0);

  useEffect(() => {
    fetchChannelListMine();
  }, [fetchChannelListMine, hasPendingChannels]);

  return (
    <Page>
      <div className="card-stack">
        {hasYoutubeChannels && <YoutubeTransferStatus hideChannelLink />}

        {channelUrls && Boolean(channelUrls.length) && (
          <Card
            title={__('Your channels')}
            titleActions={
              <>
                <Button
                  button="secondary"
                  icon={ICONS.CHANNEL}
                  label={__('New Channel')}
                  navigate={`/$/${PAGES.CHANNEL_NEW}`}
                />
              </>
            }
            isBodyList
            body={<ClaimList loading={fetchingChannels} uris={channelUrls} />}
          />
        )}
      </div>

      {!(channelUrls && channelUrls.length) && (
        <React.Fragment>
          {!fetchingChannels ? (
            <section className="main--empty">
              <Yrbl
                title={__('No channels')}
                subtitle={__("You haven't created a channel yet. All of your beautiful channels will be listed here!")}
                actions={
                  <div className="section__actions">
                    <Button button="primary" label={__('New Channel')} navigate={`/$/${PAGES.CHANNEL_NEW}`} />
                  </div>
                }
              />
            </section>
          ) : (
            <section className="main--empty">
              <Spinner delayed />
            </section>
          )}
        </React.Fragment>
      )}
    </Page>
  );
}
