import React , { FC , ReactElement , useContext , memo } from 'react' ; import { Modal as ModalUI , LinkButton } from '@contentpi/ui' ; import { redirectTo , pluralify } from '@contentpi/utils' ; import { useMutation } from '@apollo/client' ; import { I18nContext } from '@contexts/i18n' ; import DELETE_VALUES_MUTATION from '@graphql/values/deleteValues.mutation' ; import { StyledModal } from './Modal.styled' ; interface iProps { isOpen : boolean ; label : string ; options : any ; onClose ( ) : void ; } const Modal = ( { isOpen , label , onClose , options } ) : ReactElement => { const { t } = useContext ( I18nContext ) ; const { data } = options ; const [ deleteMutation ] = useMutation ( DELETE_VALUES_MUTATION ) ; const handleSubmit = async ( ) : Promise < void > => { const variables = { entries : data . entries } ; const deleted = await deleteMutation ( { variables } ) ; if ( deleted ) { redirectTo ( '_self' ) ; } } ; return ( < ModalUI isOpen = { isOpen } label = { label } options = { options } onClose = { onClose } > < StyledModal > < p > { t ( 'Are you sure you want to delete' , pluralify ( 'this entry' , 'these entries' , data . entries . length ) , '?' ) } { ' ' } < br /> { t ( 'This cannot be reverted!' ) } < /p> < div className = "buttons" > < LinkButton color = "#6663fd" bold onClick = { onClose } > { t ( 'Cancel' ) } < /LinkButton> < LinkButton onClick = { handleSubmit } color = "red" bg = "#fadad7" bold > < > { t ( `Delete ${ pluralify ( 'Entry' , 'Entries' , data . entries . length ) } `)}</>
          </LinkButton>
        </div>
      </StyledModal>
    </ModalUI>);
};
export default memo(Modal);
