joystream/pioneer/packages/joy-roles/src/tabs/Opportunities.tsx

import React from 'react'
import Moment from 'react-moment';
import NumberFormat from 'react-number-format';
import marked from 'marked';
import CopyToClipboard from 'react-copy-to-clipboard';

import { Link } from 'react-router-dom';
import {
  Button,
  Card,
  Container,
  Grid,
  Icon,
  Label,
  List,
  Message,
  Statistic,
} from 'semantic-ui-react'

import { formatBalance } from '@polkadot/util';
import { Balance } from '@polkadot/types/interfaces';

import { useMyAccount } from '@polkadot/joy-utils/MyAccountContext'

import { Countdown } from '../elements'
import { ApplicationStakeRequirement, RoleStakeRequirement } from '../StakeRequirement'
import { GenericJoyStreamRoleSchema } from '@joystream/types/hiring/schemas/role.schema.typings'
import { Opening } from "@joystream/types/hiring"
import { MemberId } from '@joystream/types/members';

import { OpeningStageClassification, OpeningState } from "../classifiers"
import { OpeningMetadataProps } from "../OpeningMetadata"
import {
  openingIcon,
  openingClass,
  openingDescription,
} from '../openingStateMarkup'

import { Loadable } from '@polkadot/joy-utils/index'

type OpeningStage = OpeningMetadataProps & {
  stage: OpeningStageClassification
}

function classificationDescription(state: OpeningState): string {
  switch (state) {
    case OpeningState.AcceptingApplications:
      return "Started"

    case OpeningState.InReview:
      return "Review started"

    case OpeningState.Complete:
    case OpeningState.Cancelled:
      return "Ended"
  }

  return "Created"
}

export function OpeningHeader(props: OpeningStage) {
  let time = null
  if (props.stage.starting_time.getTime() > 0) {
    time = <Moment unix format="DD/MM/YYYY, hh:mm A">{props.stage.starting_time.getTime() / 1000}</Moment>
  }
  return (
    <Grid columns="equal">
      <Grid.Column className="status">
        <Label ribbon size="large">
          {openingIcon(props.stage.state)}
          {openingDescription(props.stage.state)}
        </Label>
      </Grid.Column>
      <Grid.Column className="meta" textAlign="right">
        <Label>
          <Icon name="history" /> {classificationDescription(props.stage.state)}&nbsp;
            {time}
          <Label.Detail>
            <Link to={`/explorer/query/${props.stage.starting_block_hash}`}>
              <Icon name="cube" />
              <NumberFormat value={props.stage.starting_block}
                displayType="text"
                thousandSeparator={true}
              />
            </Link>
          </Label.Detail>
        </Label>
        <a>
          <CopyToClipboard text={window.location.origin + "/#/working-groups/opportunities/" + props.meta.group + "/" + props.meta.id}>
            <Label>
              <Icon name="copy" /> Copy link
                        </Label>
          </CopyToClipboard>
        </a>
      </Grid.Column>
    </Grid>
  )
}

type DefactoMinimumStake = {
  defactoMinimumStake: Balance
}

type MemberIdProps = {
  member_id?: MemberId
}

type OpeningBodyCTAProps = OpeningStakeAndApplicationStatus & OpeningStage & OpeningBodyProps & MemberIdProps

function OpeningBodyCTAView(props: OpeningBodyCTAProps) {
  if (props.stage.state != OpeningState.AcceptingApplications || applicationImpossible(props.applications)) {
    return null
  }

  let message = (
    <Message positive>
      <Icon name="check circle" /> No stake required
        </Message>
  )

  if (hasAnyStake(props)) {
    const balance = !props.defactoMinimumStake.isZero() ? props.defactoMinimumStake : props.requiredApplicationStake.hard.add(props.requiredRoleStake.hard)
    const plural = (props.requiredApplicationStake.anyRequirement() && props.requiredRoleStake.anyRequirement()) ? "s totalling" : " of"
    message = (
      <Message warning icon>
        <Icon name="warning sign" />
        <Message.Content>
          Stake{plural} at least <strong>{formatBalance(balance)}</strong> required!
        </Message.Content>
      </Message>
    )
  }

  let applyButton = (
    <Link to={"/working-groups/opportunities/" + props.meta.group + "/" + props.meta.id + "/apply"}>
      <Button icon fluid positive size="huge">
        APPLY NOW
        <Icon name="angle right" />
      </Button>
    </Link>
  )

  const accountCtx = useMyAccount()
  if (!accountCtx.state.address) {
    applyButton = (
      <Message error icon>
        <Icon name="info circle" />
        <Message.Content>
          You will need an account to apply for this role. You can generate one in the <Link to="/accounts">Accounts</Link> section.
        </Message.Content>
      </Message>
    )
    message = <p></p>
  } else if (!props.member_id) {
    applyButton = (
      <Message error icon>
        <Icon name="info circle" />
        <Message.Content>
          You will need a membership to apply for this role. You can sign up in the <Link to="/members">Membership</Link> section.
        </Message.Content>
      </Message>
    )
    message = <p></p>

  }

  return (
    <Container>
      {applyButton}
      {message}
    </Container>
  )
}

export type StakeRequirementProps = DefactoMinimumStake & {
  requiredApplicationStake: ApplicationStakeRequirement
  requiredRoleStake: RoleStakeRequirement
  maxNumberOfApplications: number
}

function hasAnyStake(props: StakeRequirementProps): boolean {
  return props.requiredApplicationStake.anyRequirement() || props.requiredRoleStake.anyRequirement()
}

class messageState {
  positive: boolean = true
  warning: boolean = false
  negative: boolean = false

  setPositive(): void {
    this.positive = true
    this.warning = false
    this.negative = false
  }

  setWarning(): void {
    this.positive = false
    this.warning = true
    this.negative = false
  }

  setNegative(): void {
    this.positive = false
    this.warning = false
    this.negative = true
  }
}

export function OpeningBodyStakeRequirement(props: StakeRequirementProps) {
  if (!hasAnyStake(props)) {
    return null
  }

  const plural = (props.requiredApplicationStake.anyRequirement() && props.requiredRoleStake.anyRequirement()) ? "s" : null
  let title = <Message.Header color="orange" as='h5'><Icon name="shield" /> Stake{plural} required!</Message.Header>
  let explanation = null

  if (!props.defactoMinimumStake.isZero()) {
    title = <Message.Header color="orange" as='h5'><Icon name="shield" /> Increased stake{plural} required!</Message.Header>
    explanation = (
      <p>
        However, in order to be in the top {props.maxNumberOfApplications} candidates, you wil need to stake at least <strong>{formatBalance(props.defactoMinimumStake)} in total</strong>.
            </p>
    )
  }

  return (
    <Message className="stake-requirements" warning>
      {title}
      {props.requiredApplicationStake.describe()}
      {props.requiredRoleStake.describe()}
      {explanation}
    </Message>
  )
}

export type ApplicationCountProps = {
  numberOfApplications: number
  maxNumberOfApplications: number
  applied?: boolean
}

export type OpeningStakeAndApplicationStatus = StakeRequirementProps & ApplicationCountProps

function applicationImpossible(props: OpeningStakeAndApplicationStatus): boolean {
  return props.maxNumberOfApplications > 0 &&
    (props.numberOfApplications >= props.maxNumberOfApplications) &&
    !hasAnyStake(props)
}

function applicationPossibleWithIncresedStake(props: OpeningStakeAndApplicationStatus): boolean {
  return props.maxNumberOfApplications > 0 &&
    (props.numberOfApplications >= props.maxNumberOfApplications) &&
    hasAnyStake(props)
}

export function ApplicationCount(props: ApplicationCountProps) {
  let max_applications = null
  if (props.maxNumberOfApplications > 0) {
    max_applications = (
      <span>
        /
                <NumberFormat value={props.maxNumberOfApplications}
          displayType="text"
          thousandSeparator={true}
        />
      </span>
    )
  }

  return (
    <span>
      <NumberFormat value={props.numberOfApplications + (props.applied ? 1 : 0)}
        displayType="text"
        thousandSeparator={true}
      />
      {max_applications}
    </span>
  )
}

export function OpeningBodyApplicationsStatus(props: OpeningStakeAndApplicationStatus) {
  const impossible = applicationImpossible(props)
  const msg = new messageState()
  if (impossible) {
    msg.setNegative()
  } else if (applicationPossibleWithIncresedStake(props)) {
    msg.setWarning()
  }

  let order = null
  if (hasAnyStake(props)) {
    order = ", ordered by total stake,"
  }

  let max_applications = null
  let message = <p>All applications{order} will be considered during the review period.</p>

  if (props.maxNumberOfApplications > 0) {
    max_applications = (
      <span>
        /
                <NumberFormat value={props.maxNumberOfApplications}
          displayType="text"
          thousandSeparator={true}
        />
      </span>
    )

    let disclaimer = null
    if (impossible) {
      disclaimer = "No futher applications will be considered."
    }

    message = (
      <p>Only the top {props.maxNumberOfApplications} applications{order} will be considered for this role. {disclaimer}</p>
    )
  }

  return (
    <Message positive={msg.positive} warning={msg.warning} negative={msg.negative}>
      <Statistic size="small">
        <Statistic.Value>
          <NumberFormat value={props.numberOfApplications + (props.applied ? 1 : 0)}
            displayType="text"
            thousandSeparator={true}
          />
          {max_applications}
        </Statistic.Value>
        <Statistic.Label>Applications</Statistic.Label>
      </Statistic>
      {message}
    </Message>
  )
}

export function OpeningBodyReviewInProgress(props: OpeningStageClassification) {
  let countdown = null
  let expected = null
  if (props.review_end_time && props.starting_time.getTime() > 0) {
    countdown = <Countdown end={props.review_end_time} />
    expected = (
      <span>
        &nbsp;(expected on&nbsp;
        <strong>
          <Moment format="MMM DD, YYYY  HH:mm:ss" date={props.review_end_time} interval={0} />
        </strong>
        )
      </span>
    )
  }

  return (
    <Message info className="countdown">
      <h4>Review process has begun</h4>
      {countdown}

      <p>
        <span>Candidates will be selected by block&nbsp;
          <strong>
            <NumberFormat value={props.review_end_block}
              displayType="text"
              thousandSeparator={true}
            />
          </strong>
        </span>
        {expected}
        <span> at the latest.</span>
      </p>
    </Message>
  )
}

type BlockTimeProps = {
  block_time_in_seconds: number
}

function timeInHumanFormat(block_time_in_seconds: number, blocks: number) {
  const d1 = new Date()
  const d2 = new Date(d1.getTime())
  d2.setSeconds(d2.getSeconds() + (block_time_in_seconds * blocks))
  return <Moment duration={d1} date={d2} interval={0} />
}

export type OpeningBodyProps = DefactoMinimumStake & StakeRequirementProps & BlockTimeProps & OpeningMetadataProps & MemberIdProps & {
  opening: Opening
  text: GenericJoyStreamRoleSchema
  stage: OpeningStageClassification
  applications: OpeningStakeAndApplicationStatus
}

export function OpeningBody(props: OpeningBodyProps) {
  const jobDesc = marked(props.text.job.description || '')
  const blockNumber = <NumberFormat value={props.opening.max_review_period_length.toNumber()}
    displayType="text"
    thousandSeparator={true} />

  let stakeRequirements = null
  switch (props.stage.state) {
    case OpeningState.WaitingToBegin:
    case OpeningState.AcceptingApplications:
      stakeRequirements = <OpeningBodyStakeRequirement {...props.applications} defactoMinimumStake={props.defactoMinimumStake} />
      break

    case OpeningState.InReview:
      stakeRequirements = <OpeningBodyReviewInProgress {...props.stage} />
      break
  }

  return (
    <Grid columns="equal">
      <Grid.Column width={10} className="summary">
        <Card.Header>
          <OpeningReward text={props.text.reward} />
        </Card.Header>
        <h4 className="headline">{props.text.headline}</h4>
        <h5>Role description</h5>
        <div dangerouslySetInnerHTML={{ __html: jobDesc }} />
        <h5>Hiring process details</h5>
        <List>
          <List.Item>
            <List.Icon name="clock" />
            <List.Content>
              The maximum review period for this opening is <strong>{blockNumber} blocks</strong> (approximately <strong>{timeInHumanFormat(props.block_time_in_seconds, props.opening.max_review_period_length.toNumber())}</strong>).
                        </List.Content>
          </List.Item>
          {props.text.process && props.text.process.details.map((detail, key) => (
            <List.Item key={key}>
              <List.Icon name="info circle" />
              <List.Content>{detail}</List.Content>
            </List.Item>
          ))}
        </List>
      </Grid.Column>
      <Grid.Column width={6} className="details">
        <OpeningBodyApplicationsStatus {...props.applications} />
        {stakeRequirements}
        <OpeningBodyCTAView {...props} {...props.applications} />
      </Grid.Column>
    </Grid>
  )
}

type OpeningRewardProps = {
  text: string
}

function OpeningReward(props: OpeningRewardProps) {
  return (
    <Statistic size="small">
      <Statistic.Label>Reward</Statistic.Label>
      <Statistic.Value>{props.text}</Statistic.Value>
    </Statistic>
  )
}

export type WorkingGroupOpening = OpeningStage & DefactoMinimumStake & OpeningMetadataProps & {
  opening: Opening
  applications: OpeningStakeAndApplicationStatus
}

type OpeningViewProps = WorkingGroupOpening & BlockTimeProps & MemberIdProps

export const OpeningView = Loadable<OpeningViewProps>(
  ['opening', 'block_time_in_seconds'],
  props => {
    const hrt = props.opening.parse_human_readable_text()

    if (typeof hrt === "undefined" || typeof hrt === "string") {
      return null
    }

    const text = hrt as GenericJoyStreamRoleSchema

    return (
      <Container className={"opening " + openingClass(props.stage.state)}>
        <h2>{text.job.title}</h2>
        <Card fluid className="container">
          <Card.Content className="header">
            <OpeningHeader stage={props.stage} meta={props.meta} />
          </Card.Content>
          <Card.Content className="main">
            <OpeningBody
              {...props.applications}
              text={text}
              meta={props.meta}
              opening={props.opening}
              stage={props.stage}
              applications={props.applications}
              defactoMinimumStake={props.defactoMinimumStake}
              block_time_in_seconds={props.block_time_in_seconds}
              member_id={props.member_id}
            />
          </Card.Content>
        </Card>
      </Container>
    )
  }
)

export type OpeningsViewProps = MemberIdProps & {
  openings?: Array<WorkingGroupOpening>
  block_time_in_seconds?: number
}

export const OpeningsView = Loadable<OpeningsViewProps>(
  ['openings', 'block_time_in_seconds'],
  props => {
    return (
      <Container>
        {props.openings && props.openings.map((opening, key) => (
          <OpeningView key={key} {...opening} block_time_in_seconds={props.block_time_in_seconds as number} member_id={props.member_id} />
        ))}
      </Container>
    )
  }
)

export const OpeningError = () => {
  return (
    <Container>
      <Message error>
        Uh oh! Something went wrong
        </Message>
    </Container>
  )
}