import styled from 'styled-components'

import {
  rem
} from '../style/function.style'

export {
  rem,
}


export const InfoBlock = styled.div<{
  color?: string,
}>`
  margin: ${rem(24)} auto 0;
  width: ${rem(638)};
  height: ${rem(52)};
  border-radius: ${rem(70)};
  display: flex;
  align-items: center;
  font-size: ${rem(24)};
  color: ${props => props.color ? props.color : '#AF925D'};
  background: #F7F4E9;
  padding: 0 ${rem(20)};
  .clock{
    margin-left: ${rem(12)};
    margin-right: ${rem(15)};
    font-size: ${rem(32)};
  }
  .text{
    line-height: 1.12;
  }
  .points{
    margin-left: auto;
    min-width: ${rem(109)};
    height: ${rem(28)};
    padding: 0 ${rem(8)};
    background-color: #fff;
    font-size: ${rem(24)};
    color: ${props => props.color ? props.color : '#AF925D'};
    text-indent: ${rem(30)};
    font-weight: 600;
    line-height: ${rem(28)};
    position: relative;
    border-radius: ${rem(28)};
    .icon{
      position: absolute;
      display: block;
      transform: translate(-${rem(10)}, -50%);
      top: 50%;
      left: 0;
      width: ${rem(48)};
      height: auto;
    }
  }
`

export const MissionContainer = styled.div<{
  isEdit: boolean
  dot: {
    width: number,
    height: number,
    left: number,
    top: number,
    backgroundColor: string,
    borderColor: string,
  }
}>`
  /* background: peachpuff; */
  width: 100%;
  height: 100%;
  position: relative;
  #missionBtn{
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    ${
      props => props.isEdit ? `
        background: rgba(255, 0, 0, .3);
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      ` : `
        font-size: 0;
      `
    }
    &.hint::after{
      content: '';
      position: absolute;
      border-radius: 100%;
      z-index: 2;
      left: ${props => props.dot.left ? props.dot.left + 'rem' : rem(-10)};
      top: ${props => props.dot.top ? props.dot.top + 'rem' : rem(-10)};
      width: ${props => props.dot.width ? props.dot.width + 'rem' : rem(30)};
      height: ${props => props.dot.height ? props.dot.height + 'rem' : rem(30)};
      background: ${props => props.dot.backgroundColor || '#F27D50'};
      border: 1px solid ${props => props.dot.backgroundColor || '#ffc59b'};
    }
  }
  #awardBtn{
    position: absolute;
    left: 0;
    top: 2rem;
    width: 2rem;
    height: 2rem;
    ${
      props => props.isEdit ? `
        background: rgba(0, 255, 0, .3);
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      ` : `
        font-size: 0;
      `
    }
  }
  #points{
    position: absolute;
    left: 3rem;
    top: 0;
    width: .5rem;
    height: .5rem;
    color: #F27D50;
    font-size: ${rem(30)};
    text-align: center;
    font-family: 'Point Font',-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,sans-serif;
    ${
      props => props.isEdit ? `
        background: rgba(0, 0, 255, .3);
      ` : ``
    }
  }
`

export const RuleBtn = styled.div<{
  color: string,
  top?: number,
  left?: number,
}>`
  position: absolute;
  z-index: 1;
  left: ${props => props.left ? `${props.left}rem` : 0};
  top: ${props => props.top ? `${props.top}rem` : rem(12)};
  width: ${rem(132)};
  height: ${rem(56)};
  line-height: ${rem(56)};
  border-radius: 0px ${rem(32.5)} ${rem(32.5)} 0px;
  border: 1px solid ${props => props.color};
  border-left: none;
  color: ${props => props.color};
  font-size: ${rem(24)};
  text-align: center;
  font-weight: bold;
  background: #FDFDFC;
  .icon{
    font-size: ${rem(28)};
    vertical-align: text-top;
    margin-left: ${rem(14)};
  }
`

export const PopContent = styled.div`
  padding: 0 ${rem(24)} 0;
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
`

export const Gap = styled.div`
 flex-shrink: 0;
`

export const TriggerBtn = styled.button<{
  backgroundImage?: string,
  color?: string,
}>`
  display: block;
  width: ${rem(630)};
  height: ${rem(84)};
  border-radius: ${rem(84)};
  margin: ${rem(44)} auto ${rem(90)};
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center center;
  background-color: transparent;
  line-height: ${rem(84)};
  color: #FFF;
  ${ props => 
    props.backgroundImage ? `
      background-image: url(${props.backgroundImage});
      font-size: 0;
    ` : `
      background-color: ${props.color ? props.color : '#BDA78'};
      font-size: ${rem(32)};
    `
  }
  &:active{
    opacity: .7;
  }
`