import { useManagerStore } from './store';
import { useEffect, useMemo, useState } from 'react';
import { useShallow } from 'zustand/shallow';
import { ManagerProvider } from './Provider';
import { ChevronDown, ChevronLeft, X, Edit, Plus, Search, Trash, Menu as MenuIcon, MenuSquare } from 'lucide-react';
import dayjs from 'dayjs';
import { useTranslation } from 'react-i18next';
import { EditMark as EditMarkComponent } from './edit/Edit';
import { toast } from 'react-toastify';
import clsx from 'clsx';
import { Controller, useForm } from 'react-hook-form';
import { Button, TextField, InputAdornment, IconButton, Menu, MenuItem } from '@mui/material';
import { MarkType } from '@kevisual/query-mark';
type ManagerProps = {
  showSearch?: boolean;
  showAdd?: boolean;
  onClick?: (data?: any) => void;
  markType?: MarkType;
  showSelect?: boolean;
};
export const Manager = (props: ManagerProps) => {
  const { showSearch = true, showAdd = false, onClick, showSelect = true } = props;

  const { control } = useForm({ defaultValues: { search: '' } });
  const { list, init, setCurrentMarkId, currentMarkId, markData, deleteMark, getMark, setMarkData, pagination, setPagination, getList, search, setSearch } =
    useManagerStore(
      useShallow((state) => {
        return {
          list: state.list,
          init: state.init,
          markData: state.markData,
          currentMarkId: state.currentMarkId,
          setCurrentMarkId: state.setCurrentMarkId,
          deleteMark: state.deleteMark,
          getMark: state.getMark,
          setMarkData: state.setMarkData,
          pagination: state.pagination,
          setPagination: state.setPagination,
          search: state.search,
          setSearch: state.setSearch,
          getList: state.getList,
        };
      }),
    );
  const { t } = useTranslation();
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);

  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };
  const handleMenuItemClick = (option: string) => {
    handleClose();
    console.log('option', option);
    init(option as any);
  };

  useEffect(() => {
    const url = new URL(window.location.href);
    let markType = url.searchParams.get('markType') || '';
    if (!markType && props.markType) {
      markType = props.markType;
    }
    init((markType as any) || 'md');
  }, []);
  useEffect(() => {
    if (search) {
      getList();
    } else if (pagination.current > 1) {
      getList();
    }
  }, [pagination.current, search]);
  const onEditMark = async (markId: string) => {
    setCurrentMarkId(markId);
    const res = await getMark(markId);
    console.log('mark', res);
    if (res.code === 200) {
      setMarkData(res.data!);
    }
  };
  const onDeleteMark = async (markId: string) => {
    const res = await deleteMark(markId);
    if (res.code === 200) {
      toast.success(t('deleteMarkSuccess'));
    }
  };
  console.log('list', list.length, pagination.total);
  
  return (
    <div className='w-full h-full p-4 bg-white border-r border-r-gray-200  relative'>
      <div className='flex  px-4 mb-4 justify-between items-center absolute top-0 left-0 h-[56px] w-full'>
        <div className='flex ml-12 items-center space-x-2 '>
          <Controller
            name='search'
            control={control}
            render={({ field }) => (
              <TextField
                {...field}
                variant='outlined'
                margin='normal'
                sx={{
                  display: showSearch ? 'block' : 'none',
                }}
                size='small'
                slotProps={{
                  input: {
                    endAdornment: (
                      <InputAdornment position='end'>
                        <Search className='w-4 h-4' onClick={() => setSearch(field.value)} />
                      </InputAdornment>
                    ),
                    onKeyDown: (event) => {
                      if (event.key === 'Enter') {
                        setSearch(field.value);
                      }
                    },
                  },
                }}
              />
            )}
          />
        </div>
        <div className={'flex items-center space-x-2'}>
          {showSelect && (
            <>
              <IconButton onClick={handleClick}>
                <MenuIcon className='w-4 h-4' />
              </IconButton>
              <Menu
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                onClick={(e) => {
                  console.log('e', e);
                }}>
                {['md', 'mdx', 'wallnote', 'excalidraw'].map((option) => (
                  <MenuItem
                    key={option}
                    value={option}
                    onClick={() => {
                      handleMenuItemClick(option);
                    }}>
                    {option}
                  </MenuItem>
                ))}
              </Menu>
            </>
          )}
          <button
            className={clsx(
              'text-blue-500 cursor-pointer hover:underline flex items-center p-2 rounded-md hover:bg-blue-100 transition duration-200',
              showAdd ? '' : 'hidden',
            )}>
            <Plus
              className={clsx('w-4 h-4 ')}
              onClick={() => {
                setCurrentMarkId('');

                setMarkData({
                  id: '',
                  title: '',
                  description: '',
                  markType: props.markType || ('md' as any),
                  summary: '',
                  tags: [],
                  link: '',
                });
              }}
            />
          </button>
          {markData && (
            <button
              className='text-blue-500 cursor-pointer hover:underline flex items-center p-2 rounded-md hover:bg-blue-100 transition duration-200'
              onClick={() => {
                setCurrentMarkId('');
                setMarkData(undefined);
              }}>
              <X className='w-4 h-4 ' />
            </button>
          )}
        </div>
      </div>
      <div className='mt-[56px] overflow-auto scrollbar' style={{ height: 'calc(100% - 56px)' }}>
        {list.map((item, index) => {
          const isCurrent = item.id === currentMarkId;
          return (
            <div
              key={item.id}
              className={`border rounded-lg p-4 mb-4 shadow-md bg-white border-gray-200 ${isCurrent ? 'border-blue-500' : ''}`}
              onClick={() => {
                onClick?.(item);
              }}>
              <div className='flex justify-between items-center'>
                <div className={`text-lg font-bold truncate cursor-pointer ${isCurrent ? 'text-blue-500' : ''}`}>{item.title}</div>
                <div className='flex space-x-2'>
                  <button
                    className='text-blue-500 cursor-pointer hover:underline flex items-center p-2 rounded-md hover:bg-blue-100 transition duration-200'
                    onClick={(e) => {
                      e.stopPropagation();
                      onEditMark(item.id);
                    }}>
                    <Edit className='w-4 h-4 ' />
                  </button>
                  <button
                    className='text-red-500 cursor-pointer hover:underline flex items-center p-2 rounded-md hover:bg-red-100 transition duration-200'
                    onClick={(e) => {
                      e.stopPropagation();
                      onDeleteMark(item.id);
                    }}>
                    <Trash className='w-4 h-4 ' />
                  </button>
                </div>
              </div>
              <div className='text-sm text-gray-600'>
                {t('markType')}: {item.markType}
              </div>
              <div className='text-sm text-gray-600'>
                {t('summary')}: {item.summary}
              </div>
              <div className='text-sm text-gray-600'>
                {t('tags')}: {item.tags?.join?.(', ')}
              </div>
              <div className='text-sm text-gray-600 hidden sm:block'>
                {t('description')}: {item.description}
              </div>
              <div
                className='text-sm text-gray-600 hidden sm:block truncate'
                onClick={() => {
                  window.open(item.link, '_blank');
                }}>
                {t('link')}: {item.link}
              </div>
              <div className='text-sm text-gray-600 hidden sm:block'>
                {t('createdAt')}: {dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}
              </div>
              <div className='text-sm text-gray-600 hidden sm:block'>
                {t('updatedAt')}: {dayjs(item.updatedAt).format('YYYY-MM-DD HH:mm:ss')}
              </div>
            </div>
          );
        })}
        <div className='flex justify-center items-center'>
          {list.length < pagination.total && (
            <button
              className='text-blue-500 cursor-pointer hover:underline flex items-center p-2 rounded-md hover:bg-blue-100 transition duration-200'
              onClick={() => {
                setPagination({ ...pagination, current: pagination.current + 1 });
              }}>
              <ChevronDown className='w-4 h-4 ' />
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

export const EditMark = () => {
  const { markData } = useManagerStore(
    useShallow((state) => {
      return {
        markData: state.markData,
      };
    }),
  );
  const mark = markData;
  if (!mark) {
    return null;
  }
  if (mark) {
    return <EditMarkComponent />;
  }
  return <div className='w-full h-full'></div>;
};
export const LayoutMain = (props: { children?: React.ReactNode; expandChildren?: React.ReactNode }) => {
  const [openMenu, setOpenMenu] = useState(false);
  const getDocumentHeight = () => {
    return document.documentElement.scrollHeight;
  };
  const markData = useManagerStore((state) => state.markData);
  const isEdit = !!markData;
  const hasExpandChildren = !!props.expandChildren;
  const style = useMemo(() => {
    if (!hasExpandChildren || openMenu) {
      return {};
    }
    return {
      top: getDocumentHeight() / 2 + 10,
    };
  }, [getDocumentHeight, hasExpandChildren, openMenu]);
  return (
    <div className='w-full h-full flex'>
      <div className={clsx('absolute top-4 z-10', openMenu ? 'left-4' : '-left-4')} style={style}>
        <Button
          variant='contained'
          color={openMenu ? 'info' : 'primary'}
          sx={{
            minWidth: '0px',
            padding: '8px',
          }}
          onClick={() => {
            setOpenMenu(!openMenu);
          }}>
          <MenuSquare className='w-4 h-4' />
        </Button>
      </div>
      <div className={clsx('h-full w-full sm:w-1/3', openMenu ? '' : 'hidden')}>{props.children}</div>
      {(!props.expandChildren || isEdit) && (
        <div className={clsx('h-full hidden sm:block sm:w-2/3', openMenu ? '' : 'hidden')}>
          <EditMark />
        </div>
      )}
      {props.expandChildren && <div className='h-full grow'>{props.expandChildren}</div>}
    </div>
  );
};
export type AppProps = {
  /**
   * 标记类型， wallnote md excalidraw
   */
  markType?: MarkType;
  /**
   * 是否显示搜索框
   */
  showSearch?: boolean;
  /**
   * 是否显示添加按钮
   */
  showAdd?: boolean;
  /**
   * 点击事件
   */
  onClick?: (data?: any) => void;
  /**
   * 管理器id, 存储到store的id
   */
  managerId?: string;
  children?: React.ReactNode;
  showSelect?: boolean;
};
export const App = (props: AppProps) => {
  return (
    <ManagerProvider id={props.managerId}>
      <LayoutMain expandChildren={props.children}>
        <Manager
          markType={props.markType}
          showSearch={props.showSearch}
          showAdd={props.showAdd}
          onClick={props.onClick}
          showSelect={props.showSelect}></Manager>
      </LayoutMain>
    </ManagerProvider>
  );
};