import { useShallow } from 'zustand/react/shallow';
import { useFileStore } from '../store';
import { useEffect } from 'react';
import path from 'path-browserify';
import prettyBytes from 'pretty-bytes';
import clsx from 'clsx';
import { isObjectNull } from '@/utils/is-null';
export const CardPath = ({ children }: any) => {
  const userAppStore = useFileStore(
    useShallow((state) => {
      return {
        list: state.list,
        getList: state.getList,
        setPath: state.setPath,
        path: state.path,
      };
    }),
  );
  const paths = ['root', ...userAppStore.path.split('/').filter((item) => item)];
  const onDirectoryClick = (prefix: string) => {
    if (prefix === 'root') {
      userAppStore.setPath('');
      userAppStore.getList();
      return;
    }
    userAppStore.setPath(prefix.replace('root/', '') + '/');
    userAppStore.getList();
  };
  return (
    <div className='border'>
      <div className='p-2'>
        <div className='flex flex-col'>
          <div className='  flex gap-2 py-2'>
            <div>Path: </div>
            <div className='flex'>
              {paths.map((item, index) => {
                const isLast = index === paths.length - 1;
                return (
                  <div
                    key={index}
                    className={clsx('select-none', !isLast && 'hover:text-gray-400 cursor-pointer')}
                    onClick={(e) => {
                      if (!isLast) {
                        onDirectoryClick(paths.slice(0, index + 1).join('/'));
                      }
                    }}>
                    {item}/
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
      <div className=''>{children}</div>
    </div>
  );
};
export const List = () => {
  const userAppStore = useFileStore(
    useShallow((state) => {
      return {
        list: state.list,
        getList: state.getList,
        setPath: state.setPath,
        path: state.path,
        getFile: state.getFile,
        file: state.file,
      };
    }),
  );
  useEffect(() => {
    userAppStore.getList();
  }, []);
  const onDirectoryClick = (prefix: string) => {
    userAppStore.setPath(prefix);
    userAppStore.getList();
  };
  return (
    <div>
      <div className='p-4'>
        <CardPath>
          <div className='flex flex-col'>
            {userAppStore.list.map((item, index) => {
              if (item.prefix) {
                let showPrefix = item.prefix.replace(userAppStore.path, '');
                showPrefix = showPrefix.replace('/', '');
                return (
                  <div
                    className=' border-t flex gap-2 p-2'
                    key={index}
                    onClick={() => {
                      onDirectoryClick(item.prefix);
                    }}>
                    <div>Directory: </div>
                    <div>{showPrefix}</div>
                  </div>
                );
              }
              const name = path.basename(item.name);
              const size = prettyBytes(item.size);
              return (
                <div
                  className=' border-t flex gap-2 p-2'
                  key={index}
                  onClick={() => {
                    userAppStore.getFile(item.name);
                  }}>
                  <div>{name}</div>
                  <div>size: {size}</div>
                </div>
              );
            })}
          </div>
        </CardPath>
        <div>
          <pre>{!isObjectNull(userAppStore.file) && JSON.stringify(userAppStore.file, null, 2)}</pre>
        </div>
      </div>
    </div>
  );
};