import { Button, Card, Col, Input, Typography } from "antd";
import ResponsiveTable from "../responsive-table/responsive-table.component";
import { 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")}
            enterButton
          />
        }
      >
        <ResponsiveTable
          pagination={false}
          loading={loading}
          columns={columns}
          mobileColumnKeys={["actions", "shopname", "active"]}
          rowKey="id"
          dataSource={filteredData}
        />
      </Card>
    </Col>
  );
}
