<commit_before>import React from "react"
import { View } from "react-native"
import { createFragmentContainer, graphql } from "react-relay"
import styled from "styled-components/native"

import { Icon20 } from "../Elements/Icon"
import { Sans12, Serif16, SerifSemibold18 } from "../Elements/Typography"

import { BiddingThemeProvider } from "../Components/BiddingThemeProvider"
import { Button } from "../Components/Button"
import { CenteringContainer, Container } from "../Components/Containers"
import { Divider } from "../Components/Divider"
import { MarkdownRenderer } from "../Components/MarkdownRenderer"
import { Timer } from "../Components/Timer"

// import { SelectMaxBid_sale_artwork } from "__generated__/SelectMaxBid_sale_artwork.graphql"
import { BidResult_sale_artwork } from "__generated__/BidResult_sale_artwork.graphql"

// interface MinimumNextBid {
//   display: string
//   cents: number
// }

interface BidResultProps {
  sale_artwork: BidResult_sale_artwork
  winning: boolean
  message_header?: string
  message_description_md?: string
}

class BidResult extends React.Component<BidResultProps> {
  render() {
    console.log(this.props)
    if (this.props.winning) {
      return (
        <BiddingThemeProvider>
          <CenteringContainer>
            <View>
              <TopOffset>
                <Icon20 m={2} source={require("../../../../../images/circle-check-green.png")} />
                <SerifSemibold18 mb={4}>You're the highest bidder</SerifSemibold18>

                <Sans12 color="black60">Time left</Sans12>
                <Timer timeLeftInMilliseconds={1000 * 60 * 20} />
              </TopOffset>
            </View>
          </CenteringContainer>
        </BiddingThemeProvider>
      )
    } else {
      return (
        <BiddingThemeProvider>
          <Container>
            <CenteringContainer>
              <Icon20 m={2} source={require("../../../../../images/circle-x-red.png")} />
              <SerifSemibold18 mb={4}>{this.props.message_header}</SerifSemibold18>
              <MarkdownRenderer>{this.props.message_description_md}</MarkdownRenderer>

              <Sans12 color="black60">Time left</Sans12>
              <Timer timeLeftInMilliseconds={1000 * 60 * 20} />

              <Divider mt={5} mb={4} />

              <Serif16>Current bid</Serif16>
              <SerifSemibold18>{this.props.sale_artwork.current_bid.display}</SerifSemibold18>
            </CenteringContainer>

            <Button text="Bid again" onPress={() => null} /><commit_msg>back select bid when outbid<commit_after>import React from "react"
import { NavigatorIOS, View } from "react-native"
import { createFragmentContainer, graphql } from "react-relay"
import styled from "styled-components/native"

import { Icon20 } from "../Elements/Icon"
import { Sans12, Serif16, SerifSemibold18 } from "../Elements/Typography"

import { BiddingThemeProvider } from "../Components/BiddingThemeProvider"
import { Button } from "../Components/Button"
import { CenteringContainer, Container } from "../Components/Containers"
import { Divider } from "../Components/Divider"
import { MarkdownRenderer } from "../Components/MarkdownRenderer"
import { Timer } from "../Components/Timer"

// import { SelectMaxBid_sale_artwork } from "__generated__/SelectMaxBid_sale_artwork.graphql"
import { BidResult_sale_artwork } from "__generated__/BidResult_sale_artwork.graphql"

// interface MinimumNextBid {
//   display: string
//   cents: number
// }

interface BidResultProps {
  sale_artwork: BidResult_sale_artwork
  winning: boolean
  message_header?: string
  message_description_md?: string
  navigator: NavigatorIOS
}

class BidResult extends React.Component<BidResultProps> {
  onPressBidAgain = () => {
    // pushing to MaxBidScreen creates a sircular relay reference but this works
    // TODO: correct the screen transision animation
    this.props.navigator.popToTop()
  }

  render() {
    if (this.props.winning) {
      return (
        <BiddingThemeProvider>
          <CenteringContainer>
            <View>
              <TopOffset>
                <Icon20 m={2} source={require("../../../../../images/circle-check-green.png")} />
                <SerifSemibold18 mb={4}>You're the highest bidder</SerifSemibold18>

                <Sans12 color="black60">Time left</Sans12>
                <Timer timeLeftInMilliseconds={1000 * 60 * 20} />
              </TopOffset>
            </View>
          </CenteringContainer>
        </BiddingThemeProvider>
      )
    } else {
      return (
        <BiddingThemeProvider>
          <Container>
            <CenteringContainer>
              <Icon20 m={2} source={require("../../../../../images/circle-x-red.png")} />
              <SerifSemibold18 mb={4}>{this.props.message_header}</SerifSemibold18>
              <MarkdownRenderer>{this.props.message_description_md}</MarkdownRenderer>

              <Sans12 color="black60">Time left</Sans12>
              <Timer timeLeftInMilliseconds={1000 * 60 * 20} />

              <Divider mt={5} mb={4} />

              <Serif16>Current bid</Serif16>
              <SerifSemibold18>{this.props.sale_artwork.current_bid.display}</SerifSemibold18>
            </CenteringContainer>

            <Button
              text="Bid again"
              onPress={() => {
                this.onPressBidAgain()
              }}
            />
{'fraction_non_alphanumeric': 0.12841987716359576, 'fraction_numerical': 0.023078354736646194, 'mean_word_length': 2.611559139784946, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 72, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5537921', 'n_tokens_mistral': 1644, 'n_tokens_neox': 1539, 'n_words': 301}