import { Button, Card, Col, Input, Table, Typography } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
export default function ProfileShopsComponent({
  loading,
  data,
  updateActiveShop,
}) {
  const { t } = useTranslation();
  const [search, setSearch] = useState("");
  const columns = [
    {
      title: t("associations.fields.shopname"),
      dataIndex: "shopname",
      key: "shopname",
      width: "25%",
      render: (text, record) => <span>{record.bodyshop.shopname}</span>,
    },
    {
      title: t("associations.fields.active"),
      dataIndex: "active",
      key: "active",
      width: "25%",
      render: (text, record) => <span>{record.active ? "Yes" : "No"}</span>,
    },
    {
      title: t("associations.labels.actions"),
      dataIndex: "actions",
      key: "actions",
      width: "25%",
      render: (text, record) => (
        <span>
          {record.active ? null : (
            <Button onClick={() => updateActiveShop(record.id)}>
              Activate
            </Button>
          )}
        </span>
      ),
    },
  ];

  const filteredData =
    search === ""
      ? data
      : data.filter((d) =>
          d.bodyshop.shopname.toLowerCase().includes(search.toLowerCase())
        );

  return (
    <Col span={24}>
      <Card
        title={
          <Typography.Title level={4}>
            {t("profile.labels.activeshop")}
          </Typography.Title>
        }
        extra={
          <Input.Search
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            allowClear
            placeholder={t("general.labels.search")}
          />
        }
      >
        <Table
          pagination={false}
          loading={loading}
          columns={columns}
          rowKey="id"
          dataSource={filteredData}
        />
      </Card>
    </Col>
  );
}