/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Button, IconButton, Size, Type } from 'browndash-components';
import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import Select from 'react-select';
import { Doc } from '../../fields/Doc';
import { StrCast } from '../../fields/Types';
import { MainViewModal } from '../views/MainViewModal';
import { GroupManager, UserOptions } from './GroupManager';
import './GroupMemberView.scss';
import { SettingsManager } from './SettingsManager';

interface GroupMemberViewProps {
    group: Doc;
    onCloseButtonClick: () => void;
}

@observer
export class GroupMemberView extends React.Component<GroupMemberViewProps> {
    @observable private memberSort: 'ascending' | 'descending' | 'none' = 'none';
    get group() {
        return this.props.group;
    }

    private get editingInterface() {
        let members: string[] = this.group ? JSON.parse(StrCast(this.group.members)) : [];
        members = this.memberSort === 'ascending' ? members.sort() : this.memberSort === 'descending' ? members.sort().reverse() : members;

        const options: UserOptions[] = this.group ? GroupManager.Instance.options.filter(option => !(JSON.parse(StrCast(this.group.members)) as string[]).includes(option.value)) : [];

        const hasEditAccess = GroupManager.Instance.hasEditAccess(this.group);

        return !this.group ? null : (
            <div className="editing-interface" style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}>
                <div className="editing-header">
                    <input
                        className="group-title"
                        style={{ marginLeft: !hasEditAccess ? '-14%' : 0 }}
                        value={StrCast(this.group.title || this.group.groupName)}
                        onChange={e => {
                            this.group.title = e.currentTarget.value;
                        }}
                        disabled={!hasEditAccess}
                    />
                    <div className="memberView-closeButton">
                        <Button icon={<FontAwesomeIcon icon="times" size="lg" />} onClick={action(this.props.onCloseButtonClick)} color={StrCast(Doc.UserDoc().userColor)} />
                    </div>
                    {GroupManager.Instance.hasEditAccess(this.group) ? (
                        <div className="group-buttons">
                            <div style={{ border: StrCast(Doc.UserDoc().userColor) }}>
                                <Select
                                    className="add-member-dropdown"
                                    isSearchable
                                    options={options}
                                    onChange={selectedOption => GroupManager.Instance.addMemberToGroup(this.group, (selectedOption as UserOptions).value)}
                                    placeholder="Add members"
                                    value={null}
                                    styles={{
                                        control: () => ({
                                            display: 'inline-flex',
                                            width: '100%',
                                        }),
                                        indicatorSeparator: () => ({
                                            display: 'inline-flex',
                                            visibility: 'hidden',
                                        }),
                                        indicatorsContainer: () => ({
                                            display: 'inline-flex',
                                            textDecorationColor: 'black',
                                        }),
                                        valueContainer: () => ({
                                            display: 'inline-flex',
                                            fontStyle: StrCast(Doc.UserDoc().userColor),
                                            color: StrCast(Doc.UserDoc().userColor),
                                            width: '100%',
                                        }),
                                    }}
                                />
                            </div>
                            <div className="delete-button">
                                <Button text="Delete Group" type={Type.TERT} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.deleteGroup(this.group)} />
                            </div>
                        </div>
                    ) : null}
                    <div
                        className="sort-emails"
                        style={{ paddingTop: hasEditAccess ? 0 : 35 }}
                        onClick={action(() => {
                            this.memberSort = this.memberSort === 'ascending' ? 'descending' : this.memberSort === 'descending' ? 'none' : 'ascending';
                        })}>
                        Emails {this.memberSort === 'ascending' ? '↑' : this.memberSort === 'descending' ? '↓' : ''} {/* → */}
                    </div>
                </div>
                <div className="style-divider" style={{ background: StrCast(Doc.UserDoc().userColor) }} />
                <div className="editing-contents" style={{ height: hasEditAccess ? '62%' : '85%' }}>
                    {members.map(member => (
                        <div className="editing-row" key={member}>
                            <div className="user-email">{member}</div>
                            {hasEditAccess ? (
                                <div className="remove-button" onClick={() => GroupManager.Instance.removeMemberFromGroup(this.group, member)}>
                                    <IconButton icon={<FontAwesomeIcon icon="trash-alt" />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.group, member)} />
                                </div>
                            ) : null}
                        </div>
                    ))}
                </div>
            </div>
        );
    }

    render() {
        return <MainViewModal isDisplayed interactive contents={this.editingInterface} dialogueBoxStyle={{ width: 400, height: 250 }} closeOnExternalClick={this.props.onCloseButtonClick} />;
    }
}