import * as React from "react"
import styled from "styled-components"
import getConfig from "jamplay-common/remote-config"
import { AvatarThumbnail } from "./components/AuthorThumbnail"
import { AnimatedBackground } from "../ContentPlaceholder"
import withTranslate from "jamplay-common/i18n/withTranslate"
import { Link } from "jamplay-common/routing"

const AuthorContainer = styled.div`
  margin: 8px 0;
  .AuthorInfo__inner-wrapper {
    display: flex;
    align-items: center;
  }
  a {
    text-decoration: none;
  }

  .AuthorInfo__name-wrapper {
    position: relative;
    margin-left: 8px;
  }
  .AuthorInfo__label-wrapper {
    position: relative;
    margin-left: 8px;
  }
  .AuthorInfo__info-wrapper p {
    color: ${(props: any) => props.theme.matteBlack};
    padding: 0;
    margin: 0;
    font-size: 0.8em;
    line-height: 1.2em;
  }
`

interface AuthorItemPropTypes extends AuthorItemData {
  highlightText?: string
  subLabel: string
  loading?: boolean
  opts?: {
    size?: "small" | "big" | "medium"
  }
}
export const AuthorWithSubLabel: React.SFC<
  AuthorItemPropTypes & withTranslatePropType
> = (props) => {
  let profilePictureWidth = 45
  if (!props.opts) {
    return null
  }
  switch (props.opts.size) {
    case "big":
      profilePictureWidth = 80
      break
    case "medium":
      profilePictureWidth = 45
      break
    case "small":
      profilePictureWidth = 40
      break
  }
  let { t } = props
  if (!t) {
    t = (s) => s
  }
  return (
    <AuthorContainer className="AuthorInfo withSublable">
      <div className="AuthorInfo__inner-wrapper">
        <div className="AuthorInfo__avatar-image-wrapper">
          <Link.Author loading={props.loading} params={{ id: props._id }}>
            <a>
              <AvatarThumbnail
                loading={props.loading}
                style={{
                  width: profilePictureWidth,
                  height: profilePictureWidth,
                  backgroundImage: props.profilePicture
                    ? `url( ${props.profilePicture} )`
                    : `url(${getConfig().publicRuntimeConfig.staticFolder ||
                        ""}/ui-assets/images/profile-picture/default-pic-editor.jpg)`
                }}
              />
            </a>
          </Link.Author>
        </div>
        <div className="AuthorInfo__info-wrapper">
          <Link.Author loading={props.loading} params={{ id: props._id }}>
            <a>
              <div className="AuthorInfo__name-wrapper">
                {props.loading ? (
                  <AnimatedBackground style={{ paddingTop: 1 }} />
                ) : null}
                <p
                  style={{ opacity: props.loading ? 0 : 1 }}
                  className="AuthorInfo__info-name"
                  dangerouslySetInnerHTML={{
                    __html: `${t("by")} ${props.name}`
                  }}
                />
              </div>
            </a>
          </Link.Author>
          {props.subLabel ? (
            <div className="AuthorInfo__label-wrapper">
              {props.loading ? (
                <AnimatedBackground style={{ paddingTop: 1 }} />
              ) : null}
              <p
                style={{ opacity: props.loading ? 0 : 1 }}
                dangerouslySetInnerHTML={{ __html: props.subLabel }}
              />
            </div>
          ) : null}
        </div>
      </div>
    </AuthorContainer>
  )
}
AuthorWithSubLabel.defaultProps = {
  opts: {
    size: "small"
  },
  name: "DEFAULT_AUTHOR_NAME",
  subLabel: "DEFAULT_LABLE",
  _id: "_ID_NOT_PROVIDE"
}
export default withTranslate(AuthorWithSubLabel) as React.SFC<
  AuthorItemPropTypes
>