import { CategoryForm } from '@/playground/components';
import {
  ActionsMenu,
  BooleanField,
  CreateInDialogButton,
  Datagrid,
  DeleteWithConfirmButton,
  EditInDialogButton,
  Empty,
  FilterButton,
  List,
  LocalizedTextField,
  SearchInput,
  SimpleForm,
  TextField,
  TextInput,
  required
} from '@applica-software-guru/react-admin';

function CategoryAddButton() {
  return (
    <CreateInDialogButton maxWidth="sm" redirect="list" size="medium" variant="contained" color="primary">
      <CategoryForm />
    </CreateInDialogButton>
  );
}

function CategorySubmitButton() {
  function handleSubmit(values) {
    console.log(values);
  }
  return (
    <CreateInDialogButton
      onSubmit={handleSubmit}
      redirect="list"
      label="Submit"
      size="medium"
      variant="contained"
      color="primary"
      maxWidth="xs"
    >
      <SimpleForm>
        <TextInput source="description" validate={required()} fullWidth />
      </SimpleForm>
    </CreateInDialogButton>
  );
}

function CategoryList() {
  return (
    <List
      filters={[<SearchInput key="keyword" source="keyword" alwaysOn />]}
      actions={
        <>
          <FilterButton />
          <ActionsMenu>
            <CategoryAddButton />
            <CategorySubmitButton />
          </ActionsMenu>
        </>
      }
      empty={
        <Empty
          actions={
            <>
              <CategoryAddButton />
              <CategorySubmitButton />
            </>
          }
        />
      }
    >
      <Datagrid>
        <LocalizedTextField source="description" />
        <BooleanField source="active" />
        <EditInDialogButton>
          <CategoryForm />
        </EditInDialogButton>
        <DeleteWithConfirmButton />
      </Datagrid>
    </List>
  );
}
export { CategoryList };