import {Image, View} from '@tarojs/components';
import cameraIcon from '@assets/goods/camera.svg';
import classNames from 'classnames';
import {usePreview} from './hooks';

export default function Upload({files, onDelete, onAdd}) {
  const onClick = usePreview(files);

  return (
    <View className='my-3 bg-white px-4 py-2'>
      <View className='w-full grid grid-cols-3 gap-2'>
        {files.map(function(url, idx) {
          return (
            <View
              key={url}
              className='w-full pt-[100%] relative rounded-md overflow-hidden'
            >
              <View
                className={classNames(
                  'absolute top-0 left-0 right-0 bottom-0 bg-gray-200',
                  'flex justify-center items-center',
                  'bg-cover bg-no-repeat bg-center',
                )}
                style={{
                  backgroundImage: `url(${url})`,
                }}
                onClick={onClick(idx)}
                onLongPress={onDelete(idx)}
              />
            </View>
          );
        })}

        <View className='w-full pt-[100%] relative rounded-md overflow-hidden'>
          <View
            className={classNames(
              'absolute top-0 left-0 right-0 bottom-0 bg-gray-200',
              'flex justify-center items-center',
            )}
            onClick={onAdd}
          >
            <Image src={cameraIcon} mode='widthFix' className='w-8' />
          </View>
        </View>
      </View>
    </View>

  );
}