// Copyright (C) The Arvados Authors. All rights reserved.
//
// SPDX-License-Identifier: AGPL-3.0

import * as React from 'react';
import { MenuItem, Grid, Select, withStyles, StyleRulesCallback } from '@material-ui/core';
import RemoveRedEye from '@material-ui/icons/RemoveRedEye';
import Edit from '@material-ui/icons/Edit';
import Computer from '@material-ui/icons/Computer';
import { WithStyles } from '@material-ui/core/styles';
import { SelectProps } from '@material-ui/core/Select';

export enum PermissionSelectValue {
    READ = 'Read',
    WRITE = 'Write',
    MANAGE = 'Manage',
}

type PermissionSelectClasses = 'value';

const PermissionSelectStyles: StyleRulesCallback<PermissionSelectClasses> = theme => ({
    value: {
        marginLeft: theme.spacing.unit,
    }
});

export const PermissionSelect = withStyles(PermissionSelectStyles)(
    ({ classes, ...props }: SelectProps & WithStyles<PermissionSelectClasses>) =>
        <Select
            {...props}
            renderValue={renderPermissionItem}
            inputProps={{ classes }}>
            <MenuItem value={PermissionSelectValue.READ}>
                {renderPermissionItem(PermissionSelectValue.READ)}
            </MenuItem>
            <MenuItem value={PermissionSelectValue.WRITE}>
                {renderPermissionItem(PermissionSelectValue.WRITE)}
            </MenuItem>
            <MenuItem value={PermissionSelectValue.MANAGE}>
                {renderPermissionItem(PermissionSelectValue.MANAGE)}
            </MenuItem>
        </Select>);

const renderPermissionItem = (value: string) =>
    <PermissionItem {...{ value }} />;

type PermissionItemClasses = 'value';

const permissionItemStyles: StyleRulesCallback<PermissionItemClasses> = theme => ({
    value: {
        marginLeft: theme.spacing.unit,
    }
});

const PermissionItem = withStyles(permissionItemStyles)(
    ({ value, classes }: { value: string } & WithStyles<PermissionItemClasses>) =>
        <Grid container alignItems='center'>
            {renderPermissionIcon(value)}
            <span className={classes.value}>
                {value}
            </span>
        </Grid>);

const renderPermissionIcon = (value: string) => {
    switch (value) {
        case PermissionSelectValue.READ:
            return <RemoveRedEye />;
        case PermissionSelectValue.WRITE:
            return <Edit />;
        case PermissionSelectValue.MANAGE:
            return <Computer />;
        default:
            return null;
    }
};