/**
 * PostDetailStyle component
 *
 * Generated by coz on 2017-01-02,
 * from a template provided by apeman-asset-templates.
 *
 * @function PostDetailStyle
 */
'use strict'

import React from 'react'
import defineDebug from 'debug'
import { ThreadColorCodes } from 'ore-fol-codes'
import { ApStyle } from 'apeman-react-basic'
import { isDark } from 'acolor'
import { prefixedStyle } from 'ore-fol-helpers'

const debug = defineDebug('project:fragment:post-detail-style')

const { COLOR_A: DEFAULT_COLOR } = ThreadColorCodes

/** @lends PostDetailStyle */
const PostDetailStyle = ({
  prefix = '.post-detail',
  color = DEFAULT_COLOR
}) => {
  let monoColor = isDark(color) ? 'white' : '#333'
  let transparentColor = 'transparent'
  let inheritColor = 'inherit'
  let data = prefixedStyle(prefix, {
    '.thread-link .link-icon': {
      backgroundColor: color,
      color: monoColor
    },
    '.ap-button': {
      backgroundColor: monoColor,
      borderColor: color,
      color: color
    },

    '.ap-text': {
      outlineColor: color
    },

    '.ap-button.ap-button-primary': {
      backgroundColor: color,
      borderColor: color,
      color: monoColor
    },

    '.post-banned-blocker .ap-button': {
      border: 'none',
      backgroundColor: transparentColor
    },
    '.post-panel-row .ap-button': {
      color: inheritColor,
      background: transparentColor
    },
    '.post-panel-row .star-button.ap-button:hover': {
      color: color
    },
    '.post-panel-row .star-button.ap-button.star-button-active .star-button-icon': {
      color: color
    }
  })
  return (
    <ApStyle className='thread-detail-style'
             data-prefix={ prefix }
             data={ data }
    />
  )
}

export default PostDetailStyle