import * as React from "react"
import styled from "styled-components"
import withTranslate from "jamplay-common/i18n/withTranslate"
import { ModalDialogContainer } from "../ModalDialog"
import { Primary, Secondary } from "../Button"
import Header, { HeaderSize } from "../Header"

const Container = styled.div`
  .confirm-delete-review-text {

  }
  .confirm-delete-review-actions{
    margin-top: 20px;
    margin-left: auto;
    * {
      margin-left: 10px;
    }
    *:first-child {
      margin-left: 0px;
    }
  }
`

export type TProps = {
  onCancel?: () => any
  onConfirm?: () => any
  disabledButtons?: boolean
}

const ConfirmDeleteReviewDialog: React.SFC<TProps & { t: any }> = (props) => {
  return (
    <ModalDialogContainer>
      <div className="dialog">
        <Container className="content">
          <Header size={HeaderSize.two} className="confirm-delete-review-text">
            {props.t("book/review/confirm-delete-dialog/text")}
          </Header>
          <div className="confirm-delete-review-actions">
            <Primary disabled={props.disabledButtons} onClick={props.onConfirm}>{props.t("confirm")}</Primary>
            <Secondary disabled={props.disabledButtons} onClick={props.onCancel}>{props.t("cancel")}</Secondary>
          </div>
        </Container>
      </div>
    </ModalDialogContainer>
  )
}

export default withTranslate(ConfirmDeleteReviewDialog) as React.SFC<TProps>