import { Button, Form, Space, Typography } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import OssUpload from './OssUpload';

type Props = {
  name?: string;
  label: string;
  bizType?: string;
  /** 最多可添加张数；不传则不限制 */
  maxCount?: number;
};

export default function DetailImageUrlList({
  name = 'detailImageUrls',
  label,
  bizType = 'DETAIL',
  maxCount,
}: Props) {
  return (
    <>
      {maxCount != null && (
        <Typography.Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
          最多 {maxCount} 张{label}
        </Typography.Text>
      )}
      <Form.List name={name}>
        {(fields, { add, remove }) => (
          <>
            {fields.map((field) => (
              <Space key={field.key} align="start" style={{ display: 'flex', marginBottom: 8 }}>
                <Form.Item {...field} style={{ flex: 1, marginBottom: 0 }}>
                  <OssUpload bizType={bizType} mediaType="IMAGE" />
                </Form.Item>
                {fields.length > 1 && (
                  <MinusCircleOutlined onClick={() => remove(field.name)} style={{ marginTop: 8 }} />
                )}
              </Space>
            ))}
            {(!maxCount || fields.length < maxCount) && (
              <Button type="dashed" onClick={() => add('')} block icon={<PlusOutlined />}>
                添加{label}
              </Button>
            )}
          </>
        )}
      </Form.List>
    </>
  );
}