import { ScrollArea } from '@mantine/core';
import { FC, useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { Button, Group, Stack } from '../../components';
import { IconButton } from '../../components/IconButton';
import { Remark } from '../../types/job';
import { formatDate } from '../../utils';

type RemarkHistoryProps = {
  remarks: Remark[];
  onAddRemark: (remark: Remark) => void;
  onDeleteRemark: (id: string) => void;
  onEditRemark: (remark: Remark) => void;
};

export const RemarkHistory: FC<RemarkHistoryProps> = ({
  remarks,
  onAddRemark,
  onDeleteRemark,
  onEditRemark,
}) => {
  const [isInputRemark, setIsInputRemark] = useState(false);
  const [selectedRemark, setSelectedRemark] = useState<Remark | null>(null);
  const [remark, setRemark] = useState('');
  return (
    <div className="h-1/3 w-full bg-white">
      <Stack className="h-full gap-2">
        <Group className="w-full items-center justify-between border-b border-gray-2 p-4 pb-2">
          <p className="font-medium">Remark</p>
          {!isInputRemark && (
            <IconButton
              className="h-6 w-6 bg-white text-gray-9"
              icon="i-ant-design-edit-filled"
              iconClass="text-sm"
              onClick={() => {
                setIsInputRemark(true);
                setSelectedRemark(null);
                setRemark('');
              }}
            />
          )}
        </Group>
        {!isInputRemark ? (
          <ScrollArea className="flex-1 p-4">
            <Stack className="gap-2">
              {remarks.map((remark, index) => (
                <Group key={index} className="gap-2">
                  <div className="h-6 w-6 flex items-center justify-center rounded bg-blue-2 text-xs text-blue-6">
                    {remark.user}
                  </div>
                  <Stack className="flex-1 gap-1">
                    <div className="whitespace-pre-wrap text-sm">
                      {remark.content}
                    </div>
                    <Group className="gap-1 text-xs text-gray-5">
                      <span>{formatDate(remark.time, 2)}</span>
                    </Group>
                  </Stack>
                  <IconButton
                    className="h-6 w-6 border border-blue-3 bg-white text-xs text-blue-5"
                    icon="i-ant-design-edit-outlined"
                    onClick={() => {
                      setRemark(remark.content);
                      setSelectedRemark(remark);
                      setIsInputRemark(true);
                    }}
                  />
                  <IconButton
                    className="h-6 w-6 border border-red-3 bg-white text-xs text-red-5"
                    icon="i-ant-design-delete-outlined"
                    onClick={() => {
                      onDeleteRemark(remark.id);
                    }}
                  />
                </Group>
              ))}
            </Stack>
          </ScrollArea>
        ) : (
          <div className="h-full w-full bg-white p-2">
            <Stack className="h-full w-full">
              <textarea
                placeholder="Remark"
                className="h-full w-full border border-gray-2 rounded-sm p-2"
                value={remark}
                onChange={(e) => setRemark(e.target.value)}
              />
              <Group className="w-full justify-end gap-2">
                <Button
                  className="self-end bg-white text-sm text-gray-9"
                  onClick={() => {
                    setRemark('');
                    setIsInputRemark(false);
                  }}
                >
                  Cancel
                </Button>
                <Button
                  className="self-end bg-blue-5 text-sm text-white"
                  onClick={() => {
                    if (selectedRemark) {
                      onEditRemark({
                        id: selectedRemark.id,
                        user: 'U',
                        content: remark,
                        time: new Date(),
                      });
                    } else {
                      onAddRemark({
                        id: uuidv4(),
                        user: 'U',
                        content: remark,
                        time: new Date(),
                      });
                    }
                    setRemark('');
                    setIsInputRemark(false);
                  }}
                >
                  Save
                </Button>
              </Group>
            </Stack>
          </div>
        )}
      </Stack>
    </div>
  );
};
