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

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

interface YAxisTipProps {
  l: number
}

const levelMap: { [prop: string]: { name: string; note: string } } = {
  1: {
    name: '做规划',
    note: '找我们商量',
  },
  2: {
    name: '做好规划',
    note: '找我们支持',
  },
  3: {
    name: '规划自己做',
    note: '有问题找我们',
  },
  4: {
    name: '有问题不找',
    note: '但还在用',
  },
  5: {
    name: '希望重新赢回',
    note: '',
  },
}

const YAxisTipWrapper = styled.div`
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .levelNum {
    height: 36px;
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 800;
    color: ${colors.fgMain};
    line-height: 36px;
    text-align: center;
  }

  .title {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    padding: 0 8px;
    overflow: hidden;
    white-space: nowrap;
    transform: scale(0.9);
    transform-origin: top;
    div {
      font-size: 12px;
      flex-grow: 1;
      flex-shrink: 0;
      line-height: 16px;
      font-weight: 500;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      color: ${colors.fgSecondary};
      display: flex;
      align-items: center;
    }
  }
`

export const YAxisTip: FC<YAxisTipProps> = ({ l }) => {
  return (
    <YAxisTipWrapper>
      <div className="levelNum">L{l}</div>
      <div className="title">
        <div>{levelMap[l].name}</div>
        {levelMap[l].note ? <div>{levelMap[l].note}</div> : null}
      </div>
    </YAxisTipWrapper>
  )
}