import * as React from "react";
import {
  Admin,
  Resource,
  List,
  Datagrid,
  TextField,
  DateField,
  NumberField,
  ShowGuesser,
  Edit,
  SimpleForm,
  TextInput,
  NumberInput,
  DateInput,
  EditProps,
  ListProps,
  DataProvider,
} from "react-admin";
import { createDataProvider } from "ra-cubicweb/dist";

import { schema } from "./schema";

const MuseumEdit = (props: EditProps) => (
  <Edit {...props}>
    <SimpleForm>
      <NumberInput source="id" />
      <TextInput source="name" />
      <NumberInput source="latitude" />
      <NumberInput source="longitude" />
      <TextInput source="postal_address" />
    </SimpleForm>
  </Edit>
);

const MuseumList = (props: ListProps) => (
  <List {...props}>
    <Datagrid rowClick="show">
      <NumberField source="id" />
      <TextField source="name" />
      <NumberField source="latitude" />
      <NumberField source="longitude" />
      <TextField source="postal_address" />
    </Datagrid>
  </List>
);

const dataProvider = createDataProvider("http://localhost:8080", schema);
dataProvider.getList("toto", {
  pagination: { page: 1, perPage: 10 },
  sort: { field: "id", order: "ASC" },
  filter: null,
});

const App = (): JSX.Element => (
  <Admin dataProvider={dataProvider as DataProvider}>
    {
      // authProvider={authProvider}
      // use cwclientlibjs to get list of CWETypes
      // and add one <Resource  per type
    }
    <Resource
      name="Museum"
      list={MuseumList}
      show={ShowGuesser}
      edit={MuseumEdit}
    />
  </Admin>
);

export default App;