import React, {FunctionComponent} from "react"
import {Portal} from "/imports/ui/components/modals/Portal";
import {IconX} from "/imports/ui/components/icons/IconX";
import _ from "lodash";
import {ActivitiesParentEnum, ActivitiesSubEnum} from "/imports/api/Activities/both/enums";

interface AllActivitiesModalProps {
    onClose: () => void
    onSubmit: (arg: string) => void
}

const columnize = (items: any[], rows: number) => {
    const toColumns = (table: any[][], item: any, iteration: number) => {
        let row = iteration % rows;

        table[row] = table[row] || [];
        table[row].push(item);

        return table;
    };

    return items.reduce(toColumns, []);
};

const ListBuilder = ({ items, onItemClick }: { items: string[], onItemClick: (arg: string) => void }) => {

    const columns = columnize(items, 4);

    return <div className="grid-x grid-margin-x">
        <div className="cell large-3 small-6">{_.map(columns[0], item => <button key={`activities_key_modal_1_${item}`} className="activity-item" onClick={() => onItemClick(item)}>{item}</button>)}</div>
        <div className="cell large-3 small-6">{_.map(columns[1], item => <button key={`activities_key_modal_2_${item}`} className="activity-item" onClick={() => onItemClick(item)}>{item}</button>)}</div>
        <div className="cell large-3 small-6">{_.map(columns[2], item => <button key={`activities_key_modal_3_${item}`} className="activity-item" onClick={() => onItemClick(item)}>{item}</button>)}</div>
        <div className="cell large-3 small-6">{_.map(columns[3], item => <button key={`activities_key_modal_4_${item}`} className="activity-item" onClick={() => onItemClick(item)}>{item}</button>)}</div>
        <div className="cell large-12" style={{ marginBottom: 40 }} />
    </div>
}

export const AllActivitiesModal: FunctionComponent<AllActivitiesModalProps> = ({ onClose, onSubmit }) => {
    return <Portal>
        <div className={"modal"}>
            <div className="modal-body">
                <button onClick={(evt) => {
                    evt.stopPropagation();
                    onClose();
                }} className="modal-close"><IconX /></button>
                <h1 className="modal-title">All activities on Everyspace</h1>
                <h4 className="modal-subtitle">Find your perfect venue</h4>
                <div>
                    {_.map(ActivitiesParentEnum, activity => {
                        return <React.Fragment key={`activity_modal_key_${activity}`}>
                            <h6 className="activity-heading">{activity}</h6>
                            <div className="divider" style={{ marginBottom: 28 }} />
                            <ListBuilder items={ActivitiesSubEnum[activity]} onItemClick={onSubmit} />
                        </React.Fragment>
                    })}
                </div>
            </div>
            <div className="modal-background" onClick={onClose} />
        </div>
    </Portal>
}