import React from 'react';
import { Dialog, Grid, Typography, TextField, Button } from '@material-ui/core';

var cloneDeep = require('lodash/cloneDeep');

export interface ArtistProperties {
    name: String,
}

export interface IProps {
    dialogOpen: boolean,
    onClose?: () => void,
    onChangeArtistProperties?: (props: ArtistProperties) => void,
    artistProperties: ArtistProperties,
    onSubmit?: () => void,
}

export default function EditArtistDialog(props: IProps) {
    const onNameChange = (name: String) => {
        if (props.onChangeArtistProperties) {
            const p = cloneDeep(props.artistProperties);
            p.name = name;
            props.onChangeArtistProperties(p);
        }
    };

    return <Dialog
        open={props.dialogOpen}
        onClose={props.onClose}
    >
        <Typography variant='h6' gutterBottom>
            Artist Details
        </Typography>
        <Grid container spacing={3}>
            <Grid item xs={12}>
                <TextField
                    label="Name"
                    value={props.artistProperties.name}
                    onChange={(i: any) => onNameChange(i.target.value)}
                    fullWidth
                />
            </Grid>
        </Grid>
        <Button variant="contained" onClick={props.onSubmit}>Submit</Button>
    </Dialog>
}