import { Button, Card, Divider, Form, Input, Space } from "antd";
import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
import { useTranslation } from "react-i18next";

const { TextArea } = Input;

export default function PartsOrdersCommentsComponent() {
  const { t } = useTranslation();

  return (
    <Card title={t("bodyshop.labels.parts_orders_comments")}>
      <Form.List name="parts_orders_comments">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }) => (
              <Space key={key} style={{ display: "flex", marginBottom: 8 }} align="baseline">
                <Form.Item
                  {...restField}
                  name={[name, "comment_type"]}
                  label={t("bodyshop.labels.comment_type")}
                  rules={[{ required: true, message: t("bodyshop.errors.comment_type_required") }]}
                >
                  <Input placeholder={t("bodyshop.placeholders.comment_type")} />
                </Form.Item>
                <Form.Item
                  {...restField}
                  name={[name, "default_comment"]}
                  label={t("bodyshop.labels.default_comment")}
                  rules={[{ required: true, message: t("bodyshop.errors.default_comment_required") }]}
                >
                  <TextArea
                    placeholder={t("bodyshop.placeholders.default_comment")}
                    rows={3}
                    maxLength={500}
                    showCount
                  />
                </Form.Item>
                <Form.Item
                  {...restField}
                  name={[name, "is_active"]}
                  label={t("bodyshop.labels.is_active")}
                  valuePropName="checked"
                  initialValue={true}
                >
                  <Input type="checkbox" />
                </Form.Item>
                <Button type="text" danger icon={<DeleteOutlined />} onClick={() => remove(name)} />
              </Space>
            ))}
            <Divider />
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                {t("bodyshop.actions.add_parts_comment")}
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
    </Card>
  );
}
