import * as React from 'react'
import styled from 'styled-components'
import swal from 'sweetalert'
import { createGlobalStyle } from 'styled-components'
import { colors } from '../libs/helpers'
import { useTranslation } from 'react-i18next'

const GlobalStyle = createGlobalStyle`
	.swal-button {
		border: 0!important;
	}
	.swal-button--confirm {
		background: ${colors.black};
	}
	.swal-button--confirm:hover {
		background: ${colors.darkBlack}!important;
	}
`

const Confirmation = styled.div``

export default (props: any) => {
	const { t } = useTranslation()
	const conftext = t('Confirm')
	const canctext = t('Cancel')

	const text = props.text || t('Are you sure you want to do this?')
	const iconprop = props.icon || 'warning'
	const disabled = !!props.disabled
	const handleClick = async () => {
		if (disabled) return
		const confirmed = await swal(text, {
			icon: iconprop,
			buttons: [canctext, conftext]
		})
		if (confirmed) props.children.props.onClick()
	}
	return (
		<>
			<GlobalStyle />
			<Confirmation>
				{React.cloneElement(props.children, { onClick: handleClick })}
			</Confirmation>
		</>
	)
}