import React, { FC } from 'react'
import { Steps as AntdSteps, StepsProps as AntdStepsProps } from 'antd'
import { StepProps } from 'antd/es/steps'
import styled from 'styled-components'
import { StepIcon } from './StepIcon'
import { useBreakpoint } from '../Breakpoint'

export type StepsProps = Omit<AntdStepsProps, 'labelPlacement' | 'size' | 'status' | 'type' | 'items'> & {
	items: Omit<StepProps, 'icon' | 'description'>[]
	showBar?: boolean
	barStyle?: React.CSSProperties
}

const StyledSteps = styled(AntdSteps)`
  &.ant-steps-label-vertical {
	.ant-steps-item-content {
	  margin-top: 5px;
	}

	.ant-steps-item-tail {
	  top: 8px;
	  margin-inline-start: 53px;
	  padding: 4px 12px;
	}
  }

  .ant-steps-item-title {
	font-size: 12px;
	line-height: 14px;
  }

  .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
	color: #8F9296;
  }
`
export const StyledBar = styled.div`
  height: 5px;
  margin-bottom: 9px;
  position: relative;

  &:after {
	content: '';
	position: absolute;
	height: 5px;
	width: 134px;
	background: #000022;
	border-radius: 5px;
	top: 0;
	left: 50%;
	transform: translate3d(-50%, 0, 0);
  }
`

export const Steps: FC<StepsProps> = ({ items, current = 0, barStyle, showBar, ...props }) => {
	const formattedItems = items.map((item, index) => {
		return {
			...item,
			icon: <StepIcon active={index <= current}>{index + 1}</StepIcon>
		}
	})
	const isSmallScreen = useBreakpoint({ s: true, down: true })
	return (
		<>
			<StyledSteps responsive={false} labelPlacement="vertical" {...props} current={current} items={formattedItems} />
			{isSmallScreen || showBar ? <StyledBar style={barStyle} /> : null}
		</>
	)
}