import styled from 'styled-components'
import theme from 'theme'
import securedMark from './assets/secured.svg'
import location from './assets/location.svg'

export const AssetWrapper = styled.div`
  background: ${theme.colors.white};
  border-radius: 6px;
  box-shadow: ${theme.shadows['asset-box']};
  height: 453px;
  position: relative;
  transition: 200ms ease-out;
  width: 337px;

  &:hover {
    box-shadow: ${theme.shadows['asset-box-hover']};
    transform: perspective(1px) scale(1.01); /* perspective reduces font-jankiness: http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/ */
  }
`

export const Image = styled.div`
  background: url('${props => props.graphicsUrl}') no-repeat;
  border-radius: 6px 6px 0 0;
  height: 180px;
  width: 100%;
`

export const SecuredMark = styled.span`
  background: url('${securedMark}') no-repeat;
  color: ${theme.textStyles.secured.color};
  font: ${theme.textStyles.secured.font};
  height: 26px;
  left: 10px;
  letter-spacing: 0.55px;
  padding: 5px 0 0 42px;
  position: absolute;
  text-transform: uppercase;
  top: 135px;
  width: 109px;
`

export const InfoWrapper = styled.div`
  height: 150px;
  width: 100%;
`

export const Title = styled.h3`
  color: ${theme.textStyles.assetTitle.color};
  font: ${theme.textStyles.assetTitle.font};
  margin: 0;
  padding: 20px 20px 2px;
`

export const ShortDescription = styled.h5`
  color: ${theme.textStyles.assetDetail.color};
  font: ${theme.textStyles.assetDetail.font};
  margin: 0;
  opacity: 0.4;
  padding: 0 20px;
`
/* stylelint-disable property-no-vendor-prefix */
export const TradingPercent = styled.h1`
  color: ${theme.colors['dodger-blue']};
  font: ${theme.textStyles.investmentH1.font};
  margin: 0;
  padding: 20px 20px 0;
`
/* stylelint-enable property-no-vendor-prefix */

export const InvestmentInfoWrapper = styled.div`
  background: ${theme.colors['dark-grey']};
  border-radius: 0 0 6px 6px;
  height: 123px;
  width: 100%;
`

export const SpecsTable = styled.table`
  height: 90px;
  width: 100%;
`

export const SpecsCell = styled.td`
  display: ${props => (props.hide ? 'none' : 'table-cell')};
  position: relative;
`

export const Separator = styled.div`
  background: ${theme.textStyles.assetDetail.color};
  float: right;
  height: 29px;
  opacity: 0.07;
  position: absolute;
  right: 0;
  top: 30px;
  width: 1px;
`

export const SpecsTitle = styled.h3`
  color: ${theme.textStyles.assetTitle.color};
  font: ${theme.textStyles.assetTitle.font};
  letter-spacing: -0.33px;
  margin: 0;
  text-align: center;
`

export const SpecsDetail = styled.h5`
  color: ${theme.textStyles.assetDetail.color};
  font: ${theme.textStyles.assetDetail.font};
  margin: 0;
  opacity: 0.3;
  text-align: center;
`

export const RemainingInvestmentWrapper = styled.div`
  background-color: ${theme.colors['light-grey3']};
  width: 100%;
`

export const RemainingInvestment = styled.div`
  background-color: ${props => statusColor(props.percent)};
  border-radius: 0 0 6px 6px;
  height: 2px;
  max-width: 100%;
  width: ${props => props.percent}%;
`

export const Tokens = styled.div`
  color: ${theme.textStyles.assetDetail.color};
  float: left;
  font: ${theme.textStyles.assetDetail.font};
  margin-top: 10px;
  overflow: hidden;
  padding-left: ${({ offsetLeft = '20px' }) => offsetLeft};
  text-overflow: ellipsis;
  white-space: nowrap;
`

const statusColor = percent =>
  percent <= 25 ? theme.colors.red : theme.colors['aqua2']

export const Status = styled.span`
  color: ${props => statusColor(props.percent)};
  float: right;
  font: ${theme.textStyles.remaining.font};
  letter-spacing: 0.88px;
  margin-top: 5px;
  padding-right: ${({ offsetRight = '20px' }) => offsetRight};
  text-transform: uppercase;
`

export const TokenUnit = styled.span`
  color: ${theme.colors['dodger-blue']};
  cursor: help;
`

export const LocationIcon = styled.span`
  background: url('${location}') no-repeat center center;
  height: 10px;
  margin-right: 2px;
  padding: 4px 10px 0 4px;
  width: 10px;
`

export const TokenAddress = styled.div`
  color: ${theme.textStyles.assetDetail.color};
  float: left;
  font: ${theme.textStyles.assetDetail.font};
  margin: 10px 0 0;
  opacity: 0.3;
  overflow: hidden;
  padding: 0 0 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 50%;
`
