import {
  MyButtons,
  MyColumns,
  MyProTableProps,
  MyTableActions,
  MyToolBarActions,
} from '@/common';
import { Apis } from '@/gen/Apis';
import { ProTable } from '@ant-design/pro-components';
import { Space, Tooltip } from 'antd';
import Create from './modals/Create';
import Update from './modals/Update';

export default function Index({
  title = '班次管理',
  noPermission,
}: {
  title?: string;
  noPermission?: boolean;
}) {
  return (
    <ProTable
      {...MyProTableProps.props}
      request={async (params, sort) =>
        MyProTableProps.request(
          params,
          sort,
          Apis.Attendance.AttendanceShifts.List,
        )
      }
      headerTitle={title}
      toolBarRender={(action) =>
        noPermission
          ? [
              <Create
                key="Create"
                reload={() => action?.reload()}
                title={title}
              />,
            ]
          : [
              <MyToolBarActions
                key="toolbar"
                actions={{
                  add: (
                    <Create
                      key="Create"
                      reload={() => action?.reload()}
                      title={title}
                    />
                  ),
                }}
              />,
            ]
      }
      columns={[
        MyColumns.ID({
          search: false,
        }),
        // Selects?.AssetProjects({
        //   title: '选择项目',
        //   key: 'asset_projects_id',
        //   hidden: true,
        // }),
        // {
        //   title: '关联项目',
        //   dataIndex: ['asset_project', 'name'],
        //   // search: {
        //   //   transform: (value) => {
        //   //     return { project_name: value };
        //   //   },
        //   // },
        //   search: false,
        // },
        {
          title: '班次名称',
          dataIndex: 'name',
        },

        {
          title: '时段要求',
          dataIndex: 'attendance_shift_periods',
          search: false,
          render: (_, item: any) => {
            const periods = item?.attendance_shift_periods || [];
            const periodTexts = periods.map((res: any) => {
              return `时段${
                res?.period_order
              }： ${res?.work_start_time?.substring(
                0,
                5,
              )}-${res?.work_end_time?.substring(0, 5)}`;
            });
            const allPeriodsText = periodTexts.join(' ');

            return (
              <Tooltip
                title={
                  periodTexts.map((text: string, index: number) => (
                    <div key={index}>{text}</div>
                  )) || ''
                }
              >
                <div
                  style={{
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    maxWidth: '150px',
                  }}
                >
                  {allPeriodsText}
                </div>
              </Tooltip>
            );
          },
        },

        {
          title: '可打卡时间范围',
          render(_, record) {
            return `${record?.allow_checkin_start?.substring(
              0,
              5,
            )} - ${record?.allow_checkin_end?.substring(0, 5)}`;
          },
          search: false,
        },
        {
          title: '备注',
          dataIndex: 'remark',
          search: false,
        },
        MyColumns.Boolean({
          dataIndex: 'is_enabled',
          title: '启用',
          search: false,
        }),

        // MyColumns.CreatedAt(),
        MyColumns.Option({
          render: (_, item: any, index, action) => (
            <Space key={index}>
              <MyTableActions
                actions={{
                  shift_update: (
                    <Update
                      key="Update"
                      item={item}
                      reload={action?.reload}
                      title={title}
                    />
                  ),
                  shift_delete: (
                    <MyButtons.Delete
                      onConfirm={() =>
                        Apis.Attendance.AttendanceShifts.Delete({
                          id: item.id,
                        }).then(() => action?.reload())
                      }
                    />
                  ),
                }}
              />
            </Space>
          ),
        }),
      ]}
    />
  );
}
