import React from 'react';
import { Card, DatePicker, FormField } from '@wix/design-system';
import { UseFormReturn, Controller } from 'react-hook-form';

function ExtensionWidget({
  form,
  entity,
}: {
  form: UseFormReturn<any>;
  entity: any;
}) {
  return (
    <Card>
      <Card.Header title="Extension Widget" />
      <Card.Divider />
      <Card.Content>
        <Controller
          control={form.control}
          name="createdDate"
          defaultValue={entity?.createdDate || undefined}
          rules={{
            validate: (value?: Date) => {
              return value?.getDay() !== 6
                ? true
                : `${value.toLocaleString('en', {
                    weekday: 'long',
                  })} is Shabbat, please choose a different day.`;
            },
          }}
          render={({
            field: { onChange, onBlur, value, ref },
            fieldState: { invalid, error },
          }: any) => (
            <FormField
              label="Created At"
              status={invalid ? 'error' : undefined}
              statusMessage={error?.message}
            >
              <DatePicker
                onClose={onBlur}
                onChange={onChange}
                value={value}
                inputProps={{ inputRef: ref }}
              />
            </FormField>
          )}
        />
      </Card.Content>
    </Card>
  );
}

export default ExtensionWidget;