import Box from "@mui/material/Box";
import { DataGridPremium, GridColDef, GridValueGetter } from "@mui/x-data-grid-premium";

const rows = Array.from({ length: 30 }, (_, id) => ({
  id: id + 1,
  firstName: `First${id + 1}`,
  lastName: `Last${id + 1}`,
  age: Math.floor(Math.random() * 100),
  occupation: `Occupation${id + 1}`,
  city: `City${id + 1}`,
  country: `Country${id + 1}`,
  email: `email${id + 1}@example.com`,
  phone: `+1-555-000${id + 1}`,
  company: `Company${id + 1}`,
  department: `Department${id + 1}`,
  salary: Math.floor(Math.random() * 100000),
  hireDate: new Date(`2023-0${(id % 9) + 1}-01`),
  performanceRating: (Math.random() * 5).toFixed(2),
  isActive: id % 2 === 0,
  status: id % 3 === 0 ? "Active" : "Inactive",
  role: `Role${id + 1}`,
  team: `Team${id + 1}`,
  manager: `Manager${id + 1}`,
  region: `Region${id + 1}`,
}));

const getFullName: GridValueGetter<(typeof rows)[number], unknown> = (value, row) => {
  return `${row.firstName || ""} ${row.lastName || ""}`;
};

const columns: GridColDef[] = [
  { field: "firstName", headerName: "First name", width: 130 },
  { field: "lastName", headerName: "Last name", width: 130 },
  {
    field: "fullName",
    headerName: "Full name",
    width: 160,
    valueGetter: getFullName,
  },
  { field: "age", headerName: "Age", width: 90, type: "number" },
  { field: "occupation", headerName: "Occupation", width: 160 },
  { field: "city", headerName: "City", width: 130 },
  { field: "country", headerName: "Country", width: 130 },
  { field: "email", headerName: "Email", width: 200 },
  { field: "phone", headerName: "Phone", width: 150 },
  { field: "company", headerName: "Company", width: 160 },
  { field: "department", headerName: "Department", width: 150 },
  { field: "salary", headerName: "Salary", width: 120, type: "number" },
  { field: "hireDate", headerName: "Hire Date", width: 130, type: "date" },
  { field: "performanceRating", headerName: "Rating", width: 110, type: "number" },
  { field: "isActive", headerName: "Active", width: 100, type: "boolean" },
  { field: "status", headerName: "Status", width: 120 },
  { field: "role", headerName: "Role", width: 130 },
  { field: "team", headerName: "Team", width: 130 },
  { field: "manager", headerName: "Manager", width: 130 },
  { field: "region", headerName: "Region", width: 130 },
];

export default function Test() {
  return (
    <Box sx={{ height: 400, width: "100%" }}>
      <DataGridPremium
        rows={rows}
        columns={columns}
        cellSelection
        initialState={{
          pinnedColumns: {
            left: ["firstName", "lastName", "fullName", "age", "occupation", "city"],
          },
        }}
      />
    </Box>
  );
}