import React, { useState } from 'react'
import styled from 'styled-components'
import { Flex, Text, Button } from '@pancakeswap/uikit'

const SubButton = styled(Button)`
  width: 25px;
  height: 25px;
  background: rgba(239, 232, 247, 0.39);
  border: 1px solid rgba(255, 255, 255, 0.0588235294117647);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
  font-size: 18px;
  color: #ada5ba;
  border-radius: 5px;
  padding: 0;
`

const AddButton = styled(Button)`
  width: 25px;
  height: 25px;
  background: linear-gradient(180deg, #6eddfa 0%, #ac74f1 100%);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
  font-size: 18px;
  color: #fff;
  border-radius: 5px;
  padding: 0;
`

interface StepProp {
  number?: number
  max?: number
  value?: (v) => void
}

const StepCom: React.FC<StepProp> = ({ number, max = 5, value }) => {
  const [valNumber, setInputState] = useState(number)

  const onChange = (type) => {
    let num = valNumber
    if (type === 'add') {
      if (valNumber === max) return
      num += 1
      value(num)
      setInputState(num)
    } else {
      if (valNumber === 0) return
      num -= 1
      value(num)
      setInputState(num)
    }
  }

  return (
    <Flex justifyContent="space-between" alignItems="center" width={120}>
      <SubButton onClick={() => onChange('sub')}>-</SubButton>
      <Text width={60} textAlign="center" color="#2F3748" fontSize="16px">
        {valNumber}
      </Text>
      <AddButton onClick={() => onChange('add')}>+</AddButton>
    </Flex>
  )
}
export default StepCom