import type { MembershipClub } from "@/lib/features/membership-clubs/types";
import {
  Grid,
  NativeSelect,
  Stack,
  Textarea,
  TextInput,
  Title,
} from "@mantine/core";
import { useForm } from "@mantine/form";

interface Props {
  clubData: MembershipClub;
}
const MembershipClubDetails: React.FC<Props> = ({ clubData }) => {
  const form = useForm({
    mode: "uncontrolled",
    initialValues: {
      clubName: clubData.name,
      clubID: clubData.club_id,
      membership_type_name: clubData.account_type_name,
      membership_type_id: clubData.ext_account_type_id,
    },

    validate: {
      clubID: (value) => (!value ? "Club ID is required" : null),
      clubName: (value) => (!value ? "Club name is required" : null),
      membership_type_name: (value) =>
        !value ? "Membership type name is required" : null,
      membership_type_id: (value) =>
        !value ? "Membership type ID is required" : null,
    },
  });
  return (
    <Stack
      bdrs={"sm"}
      bg={"white.0"}
      p={"sm"}
      style={{
        filter: "drop-shadow(0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5))",
      }}
    >
      <Title order={6} size={16}>
        Club Details
      </Title>
      <form onSubmit={form.onSubmit(console.log)}>
        <Grid gutter={"lg"}>
          <Grid.Col span={2}>
            <TextInput
              label="Club Name"
              placeholder="Enter club name"
              key={form.key("clubName")}
              {...form.getInputProps("clubName")}
            />
          </Grid.Col>
          <Grid.Col span={2}>
            <TextInput
              label="Club ID"
              placeholder="Enter club ID"
              key={form.key("clubID")}
              {...form.getInputProps("clubID")}
            />
          </Grid.Col>
          <Grid.Col span={2}>
            <NativeSelect
              label="Membership"
              data={[
                {
                  label: "Karma Discovery",
                  value: "23",
                },
                {
                  label: "Karma Club",
                  value: "32",
                },
              ]}
              key={form.key("membership_type_name")}
              {...form.getInputProps("membership_type_name")}
            />
          </Grid.Col>
          <Grid.Col span={6}>
            <Textarea label="Note" />
          </Grid.Col>
        </Grid>
      </form>
    </Stack>
  );
};

export default MembershipClubDetails;