// @flow
import { SIMPLE_SITE } from 'config';
import React, { Fragment } from 'react';
import MarkdownPreview from 'component/common/markdown-preview';
import ClaimTags from 'component/claimTags';
import CreditAmount from 'component/common/credit-amount';
import Button from 'component/button';
import * as PAGES from 'constants/pages';
import DateTime from 'component/dateTime';
import YoutubeBadge from 'component/youtubeBadge';
import SUPPORTED_LANGUAGES from 'constants/supported_languages';

type Props = {
  claim: ChannelClaim,
  uri: string,
  description: ?string,
  email: ?string,
  website: ?string,
  languages: Array<string>,
};

const formatEmail = (email: string) => {
  if (email) {
    const protocolRegex = new RegExp('^mailto:', 'i');
    const protocol = protocolRegex.exec(email);
    return protocol ? email : `mailto:${email}`;
  }
  return null;
};

function ChannelAbout(props: Props) {
  const { claim, uri, description, email, website, languages } = props;
  const claimId = claim && claim.claim_id;

  return (
    <div className="card">
      <section className="section card--section">
        <Fragment>
          {description && (
            <>
              <label>{__('Description')}</label>
              <div className="media__info-text media__info-text--constrained">
                <MarkdownPreview content={description} />
              </div>
            </>
          )}
          {email && (
            <Fragment>
              <label>{__('Contact')}</label>
              <div className="media__info-text">
                <MarkdownPreview content={formatEmail(email)} />
              </div>
            </Fragment>
          )}
          {website && (
            <Fragment>
              <label>{__('Site')}</label>
              <div className="media__info-text">
                <MarkdownPreview content={website} />
              </div>
            </Fragment>
          )}

          <label>{__('Tags')}</label>
          <div className="media__info-text">
            <ClaimTags uri={uri} type="large" />
          </div>

          <label>{__('Languages')}</label>
          <div className="media__info-text">
            {/* this could use some nice 'tags' styling */}
            {languages && languages.length
              ? languages.reduce((acc, lang, i) => {
                  return acc + `${__(SUPPORTED_LANGUAGES[lang])}` + ' ';
                }, '')
              : null}
          </div>

          <label>{__('Total Uploads')}</label>
          <div className="media__info-text">{claim.meta.claims_in_channel}</div>

          <label>{__('Last Updated')}</label>
          <div className="media__info-text">
            <DateTime timeAgo uri={uri} />
          </div>

          <label>{__('URL')}</label>
          <div className="media__info-text">
            <div className="media__info-text media__info-text--constrained">{claim.canonical_url}</div>
          </div>

          <label>{__('Claim ID')}</label>
          <div className="media__info-text">
            <div className="media__info-text media__info-text--constrained">{claim.claim_id}</div>
          </div>

          <label>{__('Staked LBRY Credits')}</label>
          <div className="media__info-text">
            <CreditAmount
              badge={false}
              amount={parseFloat(claim.amount) + parseFloat(claim.meta.support_amount)}
              precision={8}
            />{' '}
            {SIMPLE_SITE && (
              <Button
                button="link"
                label={__('view other claims at lbry://%name%', {
                  name: claim.name,
                })}
                navigate={`/$/${PAGES.TOP}?name=${claim.name}`}
              />
            )}
          </div>

          <YoutubeBadge channelClaimId={claimId} />
        </Fragment>
      </section>
    </div>
  );
}

export default ChannelAbout;