import React from 'react'
import PropTypes from 'prop-types'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

import Button from 'react-uikit/button'
import Modal from 'react-uikit/modal'
import {Grid} from 'react-uikit/layout'

const bem = new BEMModule(styles)

const PortfolioDataExportModal = ({
    exportHoldings,
    exportPortfolioHistoricals,
    isShowing,
    onDismiss,
    portfolioId,
}) => {
    const handleExportHoldings = () => {
        exportHoldings?.({portfolioId}).then(onDismiss)
    }

    const handleExporPortfolioHistoricals = () => {
        exportPortfolioHistoricals?.({portfolioId}).then(onDismiss)
    }

    const classes = bem.classNames('c-portfolio-data-export-modal')
    const contentClasses = bem.classNames(
        'c-portfolio-data-export-modal__content'
    )
    const headingClasses = bem.classNames(
        'c-portfolio-data-export-modal__heading'
    )
    const descriptionClasses = bem.classNames(
        'c-portfolio-data-export-modal__description'
    )
    const buttonClasses = bem.classNames(
        'c-portfolio-data-export-modal__button'
    )

    return (
        <Modal className={classes} isShowing={isShowing} onDismiss={onDismiss}>
            <Modal.HeaderBar title="Export Portfolio Data" />

            <Grid
                className={contentClasses}
                templateColumns="1fr auto"
                gap={16}
            >
                <div>
                    <h1 className={headingClasses}>Portfolio Snapshot</h1>
                    <p className={descriptionClasses}>
                        Current snapshot of your portfolio in CSV format
                    </p>
                </div>
                <Button
                    className={buttonClasses}
                    isOutline
                    variant="primary"
                    onClick={handleExportHoldings}
                >
                    Download
                </Button>

                <div>
                    <h1 className={headingClasses}>Sharpe Ratio Historicals</h1>
                    <p className={descriptionClasses}>
                        Historical values for calculating Sharpe Ratio in CSV
                        format
                    </p>
                </div>
                <Button
                    className={buttonClasses}
                    isOutline
                    variant="primary"
                    onClick={handleExporPortfolioHistoricals}
                >
                    Download
                </Button>
            </Grid>
        </Modal>
    )
}

PortfolioDataExportModal.propTypes = {
    exportHoldings: PropTypes.func,
    exportPortfolioHistoricals: PropTypes.func,
    isShowing: PropTypes.bool,
    portfolioId: PropTypes.string,
    onDismiss: PropTypes.func,
}

export default PortfolioDataExportModal