import React from 'react';
import { Select } from 'antd';

import { BizGroupInfo } from '@easytwin/core';
import { ProModal } from '@/components';

export interface ChangeGroupModalProp {
  dataSource: BizGroupInfo[];
  defaultSelectValue?: string;
  onOk?: (groupId?: string) => void;
  onCancel?: () => void;
}

const ChangeGroupModal: React.FC<ChangeGroupModalProp> = function ({
  dataSource,
  defaultSelectValue,
  onOk,
  onCancel,
}) {
  const [groupId, setGroupId] = React.useState<string | undefined>(defaultSelectValue);
  return (
    <ProModal
      visible
      centered
      title="修改分组"
      getContainer={false}
      onOk={() => onOk?.(groupId)}
      onCancel={onCancel}>
      <Select
        className="!w-full"
        placeholder="请选择分组"
        value={groupId}
        onChange={(value) => setGroupId(value)}>
        {dataSource.map(({ id, name }) => (
          <Select.Option key={id} value={id}>
            {name}
          </Select.Option>
        ))}
      </Select>
    </ProModal>
  );
};

export default ChangeGroupModal;