<commit_before>/* @flow */

import React, {Component} from 'react'
import {Header} from '../common-adapters'
import {Icon, Text} from '../common-adapters/index'
import {globalStyles, globalColorsDZ2} from '../styles/style-guide'
import flags from '../util/feature-flags'

import type {HeaderProps} from './header.render'

export default class HeaderRender extends Component {
  props: HeaderProps;
  state: {showCloseWarning: boolean};

  constructor (props: HeaderProps) {
    super(props)
    this.state = {showCloseWarning: false}
  }

  render () {
    if (flags.tracker2) {
      return this.render2(styles2)
    }
    return this.renderDefault(styles1)
  }

  renderDefault (styles: Object) {
    return (
      <Header
        style={styles.header}
        icon
        title={this.props.reason}
        onClose={this.props.onClose}
      />
    )
  }

  render2 (styles: Object) {
    let headerStyle = (this.props.currentlyFollowing && !this.props.changed) ? styles.headerSuccess : styles.headerNormal
    let headerTextStyle = styles.headerTextNormal
    switch (this.props.trackerState) {
      case 'warning':
        headerStyle = styles.headerWarning
        headerTextStyle = styles.headerTextWarning
        break
      case 'error': headerStyle = styles.headerError; break
    }

    let headerText: string = this.props.reason
    if (!this.props.currentlyFollowing && this.state.showCloseWarning) {
      headerStyle = styles.headerWarning
      headerTextStyle = styles.headerTextWarning
      headerText = 'You will see this window every time you access this folder.'
    }

    // If there's a lastAction, it overrides everything else.
    switch (this.props.lastAction) {
      case 'followed':
      case 'refollowed':
      case 'unfollowed':
        headerStyle = styles.headerSuccess
        headerTextStyle = styles.headerTextNormal
        headerText = this.props.reason
        break
      case 'error':
        headerStyle = styles.headerWarning
        headerTextStyle = styles.headerTextWarning
    }

    return (
      <div style={styles.outer}>
        <div style={{...styles.header, ...headerStyle}}>
          <Text type='BodySemibold' dz2 lineClamp={2} style={{...styles.text, ...headerTextStyle, flex: 1}}>{headerText}</Text>
          <Icon type='fa-times' opacity style={styles.close}
            onClick={() => this.props.onClose()}
            onMouseEnter={() => this.closeMouseEnter()}
            onMouseLeave={() => this.closeMouseLeave()} />
        </div>
      </div>
    )
  }

  closeMouseEnter () {
    this.setState({showCloseWarning: true})
  }

  closeMouseLeave () {
    this.setState({showCloseWarning: false})
  }
}

const styles1 = {
  header: {
    paddingLeft: 15
  }
}

const styles2 = {
  outer: {
    position: 'relative'
  },
  header: {
    ...globalStyles.windowDragging,
    cursor: 'default',
    position: 'absolute',
    top: 0,
    ...globalStyles.flexBoxRow,
    height: 90,
    width: 320
  },
  headerNormal: {
    backgroundColor: globalColorsDZ2.blue
  },
  headerSuccess: {
    backgroundColor: globalColorsDZ2.green
  },
  headerWarning: {
    backgroundColor: globalColorsDZ2.yellow
  },
  headerTextNormal: {
    color: globalColorsDZ2.white,
    fontSize: 14,
    lineHeight: 'normal',
    opacity: 1
  },<commit_msg>Use an fade animation on the header background color change<commit_after>/* @flow */

import React, {Component} from 'react'
import {Header} from '../common-adapters'
import {Icon, Text} from '../common-adapters/index'
import {globalStyles, globalColorsDZ2} from '../styles/style-guide'
import flags from '../util/feature-flags'

import type {HeaderProps} from './header.render'

export default class HeaderRender extends Component {
  props: HeaderProps;
  state: {showCloseWarning: boolean};

  constructor (props: HeaderProps) {
    super(props)
    this.state = {showCloseWarning: false}
  }

  render () {
    if (flags.tracker2) {
      return this.render2(styles2)
    }
    return this.renderDefault(styles1)
  }

  renderDefault (styles: Object) {
    return (
      <Header
        style={styles.header}
        icon
        title={this.props.reason}
        onClose={this.props.onClose}
      />
    )
  }

  render2 (styles: Object) {
    let headerStyle = (this.props.currentlyFollowing && !this.props.changed) ? styles.headerSuccess : styles.headerNormal
    let headerTextStyle = styles.headerTextNormal
    switch (this.props.trackerState) {
      case 'warning':
        headerStyle = styles.headerWarning
        headerTextStyle = styles.headerTextWarning
        break
      case 'error': headerStyle = styles.headerError; break
    }

    let headerText: string = this.props.reason
    if (!this.props.currentlyFollowing && this.state.showCloseWarning) {
      headerStyle = styles.headerWarning
      headerTextStyle = styles.headerTextWarning
      headerText = 'You will see this window every time you access this folder.'
    }

    // If there's a lastAction, it overrides everything else.
    switch (this.props.lastAction) {
      case 'followed':
      case 'refollowed':
      case 'unfollowed':
        headerStyle = styles.headerSuccess
        headerTextStyle = styles.headerTextNormal
        headerText = this.props.reason
        break
      case 'error':
        headerStyle = styles.headerWarning
        headerTextStyle = styles.headerTextWarning
    }

    return (
      <div style={styles.outer}>
        <div style={{...styles.header, ...headerStyle}}>
          <Text type='BodySemibold' dz2 lineClamp={2} style={{...styles.text, ...headerTextStyle, flex: 1}}>{headerText}</Text>
          <Icon type='fa-times' opacity style={styles.close}
            onClick={() => this.props.onClose()}
            onMouseEnter={() => this.closeMouseEnter()}
            onMouseLeave={() => this.closeMouseLeave()} />
        </div>
      </div>
    )
  }

  closeMouseEnter () {
    this.setState({showCloseWarning: true})
  }

  closeMouseLeave () {
    this.setState({showCloseWarning: false})
  }
}

const styles1 = {
  header: {
    paddingLeft: 15
  }
}

const styles2 = {
  outer: {
    position: 'relative'
  },
  header: {
    ...globalStyles.windowDragging,
    cursor: 'default',
    position: 'absolute',
    top: 0,
    ...globalStyles.flexBoxRow,
    height: 90,
    width: 320,
    transition: 'background 0.2s linear'
  },
  headerNormal: {
    backgroundColor: globalColorsDZ2.blue
  },
  headerSuccess: {
    backgroundColor: globalColorsDZ2.green
  },
  headerWarning: {
    backgroundColor: globalColorsDZ2.yellow
  },
  headerTextNormal: {
    color: globalColorsDZ2.white,
    fontSize: 14,
    lineHeight: 'normal',
    opacity: 1
  },
{'fraction_non_alphanumeric': 0.12215909090909091, 'fraction_numerical': 0.008074162679425838, 'mean_word_length': 2.7984099943214082, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 25, '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': '5381744', 'n_tokens_mistral': 2002, 'n_tokens_neox': 1978, 'n_words': 443}