import type { ReactElement, ReactNode } from 'react'
import React from 'react'
import cx from 'classnames'
import type { BaseProps } from '@toptal/picasso-shared'
import type { Theme } from '@material-ui/core/styles'
import { makeStyles } from '@material-ui/core/styles'

import styles from './styles'

export interface Props extends BaseProps {
  /** Flag for transition execution. */
  on: boolean
  /** Element to apply transitions. */
  children: ReactNode
}

const useStyles = makeStyles<Theme>(styles, {
  name: 'Rotate180',
})

export const Rotate180 = (props: Props) => {
  const { children, style, className, on, ...rest } = props
  const classes = useStyles()

  const childProps = {
    className: cx(className, classes.transition, {
      [classes.rotate180]: on,
    }),
    style,
    ...rest,
  }

  return (
    <>
      {React.Children.map(children, child =>
        React.cloneElement(child as ReactElement, childProps)
      )}
    </>
  )
}

Rotate180.displayName = 'Rotate180'

export default Rotate180