'use client';

import * as React from 'react';
import RouterLink from 'next/link';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import LinearProgress from '@mui/material/LinearProgress';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { CheckCircle as CheckCircleIcon } from '@phosphor-icons/react/dist/ssr/CheckCircle';
import { Clock as ClockIcon } from '@phosphor-icons/react/dist/ssr/Clock';
import { Images as ImagesIcon } from '@phosphor-icons/react/dist/ssr/Images';
import { Minus as MinusIcon } from '@phosphor-icons/react/dist/ssr/Minus';
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
import { TrashSimple as TrashSimpleIcon } from '@phosphor-icons/react/dist/ssr/TrashSimple';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

import { paths } from '@/paths';
import { dayjs } from '@/lib/dayjs';
import { DataTable } from '@/components/core/data-table';
import type { ColumnDef } from '@/components/core/data-table';

import ConfirmDeleteModal from './confirm-delete-modal';
import type { LessonType } from './lesson-type';
import { useLessonTypesSelection } from './lesson-types-selection-context';

function columns(handleDeleteClick: (testId: string) => void): ColumnDef<LessonType>[] {
  return [
    {
      formatter: (row): React.JSX.Element => (
        <Stack
          direction="row"
          spacing={1}
          sx={{ alignItems: 'center' }}
        >
          <Link
            color={row.isEmpty ? 'disabled' : 'inherit'}
            component={RouterLink}
            href={paths.dashboard.lesson_types.details(row.id)}
            sx={{ whiteSpace: 'nowrap' }}
            variant="subtitle2"
          >
            {row.isEmpty ? '--' : row.name}
          </Link>
        </Stack>
      ),
      name: 'Name',
      width: '150px',
    },
    {
      formatter: (row): React.JSX.Element => (
        <Stack
          direction="row"
          spacing={1}
          sx={{ alignItems: 'center' }}
        >
          <div>
            <Link
              color={row.isEmpty ? 'disabled' : 'inherit'}
              component={RouterLink}
              href={paths.dashboard.lesson_types.details(row.id)}
              sx={{ whiteSpace: 'nowrap' }}
              variant="subtitle2"
            >
              {row.isEmpty ? '--' : row.type}
            </Link>
          </div>
        </Stack>
      ),
      name: 'Lesson type',
      width: '150px',
    },
    {
      formatter: (row): React.JSX.Element => (
        <Stack
          direction="row"
          spacing={1}
          sx={{ alignItems: 'center' }}
        >
          <div>
            <Link
              color={row.isEmpty ? 'disabled' : 'inherit'}
              component={RouterLink}
              href={paths.dashboard.lesson_types.details(row.id)}
              sx={{ whiteSpace: 'nowrap' }}
              variant="subtitle2"
            >
              {row.isEmpty ? '--' : row.pos}
            </Link>
          </div>
        </Stack>
      ),
      name: 'Lesson position',
      width: '50px',
    },
    {
      formatter: (row): React.JSX.Element => {
        // const { t } = useTranslation();

        const mapping = {
          active: {
            label: 'Active',
            icon: (
              <CheckCircleIcon
                color="var(--mui-palette-success-main)"
                weight="fill"
              />
            ),
          },
          blocked: { label: 'Blocked', icon: <MinusIcon color="var(--mui-palette-error-main)" /> },
          pending: {
            label: 'Pending',
            icon: (
              <ClockIcon
                color="var(--mui-palette-warning-main)"
                weight="fill"
              />
            ),
          },
          visible: {
            label: 'visible',
            icon: (
              <ClockIcon
                color="var(--mui-palette-success-main)"
                weight="fill"
              />
            ),
          },
          hidden: {
            label: 'hidden',
            icon: (
              <ClockIcon
                color="var(--mui-palette-warning-main)"
                weight="fill"
              />
            ),
          },
          no_value: {
            label: 'no_value',
            icon: (
              <ClockIcon
                color="var(--mui-palette-warning-main)"
                weight="fill"
              />
            ),
          },
        } as const;

        const { label, icon } = row.isEmpty ? { label: '--', icon: null } : mapping[row.visible];

        return (
          <Button
            onClick={() => {
              toast.error('sorry but not implementd');
            }}
            style={{ backgroundColor: 'transparent' }}
          >
            {/* <Chip icon={icon} label={label} size="small" variant="outlined" /> */}
            {label}
          </Button>
        );
      },
      name: 'visible',
      width: '100px',
    },
    {
      formatter(row) {
        return row.isEmpty ? '--' : dayjs(row.createdAt).format('MMM D, YYYY ');
      },
      name: 'Created at',
      width: '100px',
    },
    {
      formatter: (row): React.JSX.Element => (
        <Stack
          direction="row"
          spacing={1}
        >
          <IconButton
            //
            disabled={row.isEmpty}
            component={RouterLink}
            href={paths.dashboard.lesson_types.details(row.id)}
          >
            <PencilSimpleIcon />
          </IconButton>
          <IconButton
            color="error"
            disabled={row.isEmpty}
            onClick={() => {
              handleDeleteClick(row.id);
            }}
          >
            <TrashSimpleIcon />
          </IconButton>
        </Stack>
      ),
      name: 'Actions',
      hideName: true,
      width: '100px',
      align: 'right',
    },
  ];
}

export interface LessonTypesTableProps {
  rows: LessonType[];
  reloadRows: () => void;
}

export function LessonTypesTable({ rows, reloadRows }: LessonTypesTableProps): React.JSX.Element {
  const { t } = useTranslation(['lesson_type']);
  const { deselectAll, deselectOne, selectAll, selectOne, selected } = useLessonTypesSelection();

  const [idToDelete, setIdToDelete] = React.useState('');
  const [open, setOpen] = React.useState(false);

  function handleDeleteClick(testId: string): void {
    setOpen(true);
    setIdToDelete(testId);
  }

  return (
    <React.Fragment>
      <ConfirmDeleteModal
        idToDelete={idToDelete}
        open={open}
        reloadRows={reloadRows}
        setOpen={setOpen}
      />
      <DataTable<LessonType>
        columns={columns(handleDeleteClick)}
        onDeselectAll={deselectAll}
        onDeselectOne={(_, row) => {
          deselectOne(row.id);
        }}
        onSelectAll={selectAll}
        onSelectOne={(_, row) => {
          selectOne(row.id);
        }}
        rows={rows}
        selectable
        selected={selected}
      />
      {!rows.length ? (
        <Box sx={{ p: 3 }}>
          <Typography
            color="text.secondary"
            sx={{ textAlign: 'center' }}
            variant="body2"
          >
            {/* TODO: use hyphen here */}
            {t('no-lesson-types-found')}
          </Typography>
        </Box>
      ) : null}
    </React.Fragment>
  );
}
