import React from 'react'
import {type GridColDef} from '@mui/x-data-grid'
import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
import {Stack} from '@mui/material'
import {CustomDataGrid} from '../../components/CustomDataGrid'
import {localeText} from '../../locales/ru/localeText'

export const SightList = () => {
  const {dataGridProps} = useDataGrid({resource: 'sight/'})

  const columns = React.useMemo<GridColDef[]>(
    () => [
      {
        field: 'id',
        headerName: 'ID',
        type: 'number',
        minWidth: 70,
        display: 'flex',
        align: 'left',
        headerAlign: 'left',
      },
      {
        field: 'name',
        headerName: 'Название',
        type: 'string',
        minWidth: 150,
        display: 'flex',
        align: 'left',
        headerAlign: 'left',
      },
      {
        field: 'latitude',
        headerName: 'Широта',
        type: 'number',
        minWidth: 150,
        display: 'flex',
        align: 'left',
        headerAlign: 'left',
      },
      {
        field: 'longitude',
        headerName: 'Долгота',
        type: 'number',
        minWidth: 150,
        display: 'flex',
        align: 'left',
        headerAlign: 'left',
      },
      {
        field: 'city_id',
        headerName: 'ID города',
        type: 'number',
        minWidth: 70,
        display: 'flex',
        align: 'left',
        headerAlign: 'left',
      },
      {
        field: 'city',
        headerName: 'Город',
        type: 'string',
        minWidth: 150,
        align: 'left',
        headerAlign: 'left',
        flex: 1,
      },
      {
        field: 'actions',
        headerName: 'Действия',
        minWidth: 120,
        display: 'flex',
        align: 'right',
        headerAlign: 'center',
        sortable: false,
        filterable: false,
        disableColumnMenu: true,
        renderCell: function render({row}) {
          return (
            <>
              <EditButton hideText recordItemId={row.id} />
              <ShowButton hideText recordItemId={row.id} />
              <DeleteButton hideText confirmTitle="Вы уверены?" recordItemId={row.id} />
            </>
          )
        },
      },
    ],
    [],
  )

  return (
    <List>
      <Stack gap={2.5}>
        <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} hasCoordinates />
      </Stack>
    </List>
  )
}