import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import {
  createStyles,
  Theme,
  withStyles,
  WithStyles
} from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import React from "react";

import CardTitle from "@saleor/components/CardTitle";
import ControlledSwitch from "@saleor/components/ControlledSwitch";
import FormSpacer from "@saleor/components/FormSpacer";
import Hr from "@saleor/components/Hr";
import i18n from "../../../i18n";
import { FormData } from "../PluginsDetailsPage";

interface PluginInfoProps {
  data: FormData;
  errors: Partial<{
    description: string;
    domain: string;
    name: string;
  }>;
  disabled: boolean;
  onChange: (event: React.ChangeEvent<any>) => void;
}

const styles = (theme: Theme) =>
  createStyles({
    title: {
      fontSize: 14,
      color: "#616161",
      paddingTop: 10
    },
    status: {
      fontSize: 16,
      color: "#3D3D3D",
      paddingTop: 20,
      fontWeight: "400"
    }
  });

const PluginInfo = withStyles(styles, { name: "PluginInfo" })(
  ({
    data,
    disabled,
    classes,
    errors,
    onChange
  }: PluginInfoProps & WithStyles<typeof styles>) => {
    return (
      <Card>
        <CardTitle
          title={i18n.t("Plugin Information and Status", {
            context: "plugin configuration"
          })}
        />
        <CardContent>
          <Typography className={classes.title} variant="h6">
            {i18n.t("Plugin Name")}
          </Typography>
          <Typography>{data.name}</Typography>
          {data.description && (
            <>
              <Typography className={classes.title} variant="h6">
                {i18n.t("Plugin Description")}
              </Typography>
              <Typography>{data.description}</Typography>
            </>
          )}
          <FormSpacer />
          <Hr />
          <Typography className={classes.status} variant="h6">
            {i18n.t("Status")}
          </Typography>
          <ControlledSwitch
            checked={data.active}
            label={"Set plugin as Active"}
            name={"active" as keyof FormData}
            onChange={onChange}
          />
        </CardContent>
      </Card>
    );
  }
);
PluginInfo.displayName = "PluginInfo";
export default PluginInfo;