import { FC } from 'react'
import styled from 'styled-components'

import { colors } from '../style-vars'

interface XAxisTipProps {
  s: number
}

const stageMap: { [prop: string]: { name: string; note: string } } = {
  1: {
    name: 'Understand',
    note: '了解/业务架构、负载',
  },
  2: {
    name: 'POC won',
    note: '进入/POC 成功',
  },
  3: {
    name: 'Production in use',
    note: '赢得/上线成功',
  },
  4: {
    name: 'Success',
    note: '价值证明/技术业务成功',
  },
  5: {
    name: 'Conversion',
    note: '客户转化/客户主动站台',
  },
  6: {
    name: 'Replicable',
    note: '复制/1->N,客户规模化',
  },
}

const XAxisTipWrapper = styled.div`
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;

  .levelNum {
    width: 42px;
    flex-shrink: 0;
    font-size: 24px;
    font-weight: 800;
    color: ${colors.fgMain};
    text-align: right;
  }

  .title {
    flex-grow: 1;
    padding: 0 8px 0 12px;
    overflow: hidden;
    white-space: nowrap;
    div {
      font-size: 12px;
      flex-grow: 1;
      flex-shrink: 0;
      line-height: 16px;
      font-weight: 500;
      color: ${colors.fgSecondary};
      display: flex;
      align-items: center;

      &.name {
        color: ${colors.fgMain};
        font-size: 14px;
        font-weight: 600;
      }

      &.note {
        transform: scale(0.9);
        transform-origin: left;
      }
    }
  }
`

export const XAxisTip: FC<XAxisTipProps> = ({ s }) => {
  return (
    <XAxisTipWrapper>
      <div className="levelNum">S{s}</div>
      <div className="title">
        <div className="name">{stageMap[s].name}</div>
        <div className="note">{stageMap[s].note}</div>
      </div>
    </XAxisTipWrapper>
  )
}