import {Meteor} from "meteor/meteor";
// @ts-ignore
import {FlowRouter} from 'meteor/ostrio:flow-router-extra';
import React, {FunctionComponent} from "react";
import {useTracker} from "meteor/react-meteor-data";
import {LocationsDB} from "/imports/api/Listings/both/collections/locations";

interface AdminSpacesTagsProps {}

export const AdminLocations: FunctionComponent<AdminSpacesTagsProps> = () => {

    const [,locations] = useTracker(() => {
        return [
            Meteor.subscribe("AdminLocations"),
            LocationsDB.find().fetch()
        ];
    }, []);

    return <div className="grid-container">

        <a href={FlowRouter.path("AdminLocationsNew")} className="float-right button small">New</a>

        <table className="admin-spaces-tags-table margin-top-2">
            <thead>
            <tr>
                <th>Name</th>
                <th>Public</th>
                <th>Landing</th>
                <th />
            </tr>
            </thead>
            <tbody>
                {locations.map(({ _id, name, isPublic, isLanding }) => <tr key={_id}>
                        <td>
                            <a href={FlowRouter.path("AdminLocationsEdit", { locationId: _id })}>{name}</a>
                        </td>
                        <td>
                            <input
                                onChange={() => Meteor.call("locations.toggleIsPublic", _id)}
                                type="checkbox"
                                checked={isPublic} />
                        </td>
                        <td>
                            <input
                                onChange={() => Meteor.call("locations.toggleIsLanding", _id)}
                                type="checkbox"
                                checked={isLanding} />
                        </td>
                        <td className="text-right">
                            <button
                                onClick={() => {
                                    if(confirm("Are you sure")) {
                                        Meteor.call("locations.delete", _id);
                                    }
                                }}
                                className="button alert tiny margin-bottom-0">
                                Delete
                            </button>
                        </td>
                    </tr>
                )}
            </tbody>
        </table>

    </div>;
}