import React, { useCallback, useState } from 'react';
import { format } from 'date-fns';
import { Button, Card, Flex, Form, TextArea, TextField } from '../../atoms';
import { DatePickerButton } from '../../molecules';

interface Values {
  goal?: string;
  effect?: string;
  huddle?: string;
  dueDate?: Date;
}

interface GoalManageCardEditProps {
  onChange?: (values: Partial<Values>) => void;
  defaultValues?: Values;
  errors?: { [key in keyof Values]: string };
  onSubmit?: (values: Values) => void;
}

const initialValues: Values = {
  goal: '',
  effect: '',
  huddle: '',
  dueDate: undefined,
};

// eslint-disable-next-line @typescript-eslint/no-empty-function -- dummy용 함수
const dummyFn = (): void => {};

export function GoalManageCardEdit(
  props: GoalManageCardEditProps
): React.ReactElement {
  const { defaultValues, errors } = props;
  const [values, setValues] = useState(defaultValues || initialValues);

  const onChange = useCallback(
    (v: Partial<Values>) => {
      setValues((prev) => ({ ...prev, ...v }));
      props.onChange?.(v);
    },
    [props]
  );

  const onClickInit = useCallback(() => {
    setValues(initialValues);
    props.onChange?.(defaultValues || initialValues);
  }, [defaultValues, props]);

  const onClickSubmit = useCallback(() => {
    props.onSubmit?.(values);
  }, [props, values]);

  return (
    <Card style={{ width: '100%' }}>
      <Form.Root onSubmit={dummyFn}>
        <Flex direction="column" gap="5">
          <Form.Field name="title">
            <Form.Label>이번 코칭의 목표는 아래와 같습니다</Form.Label>
            <TextField.Root
              error={Boolean(errors?.goal)}
              onChange={(e) => {
                onChange({ goal: e.target.value });
              }}
              placeholder="이번 코칭 과정의 목표를 한 문장으로 적어주세요"
              value={values.goal}
            />
            <Form.Message forceMatch={Boolean(errors?.goal)}>
              {errors?.goal}
            </Form.Message>
          </Form.Field>

          <Form.Field name="effect">
            <Form.Label>기대효과</Form.Label>
            <TextArea
              error={Boolean(errors?.effect)}
              onChange={(e) => {
                onChange({ effect: e.target.value });
              }}
              placeholder="예시 : 팀원들과 더 친밀해지고, 팀원들에 대한 이해도가 쌓이며 더 효율적인 인재관리를 위한 관계형성이 가능해집니다."
              resize="vertical"
              value={values.effect}
            />
            <Form.Message forceMatch={Boolean(errors?.effect)}>
              {errors?.effect}
            </Form.Message>
          </Form.Field>

          <Form.Field name="huddle">
            <Form.Label>방해요소</Form.Label>
            <TextArea
              error={Boolean(errors?.huddle)}
              onChange={(e) => {
                onChange({ huddle: e.target.value });
              }}
              placeholder={`- 갑자기 잡히는 미팅들
- MZ 세대와의 자연스럽지 않은 소통
- 대화에서 참을성 부족`}
              resize="vertical"
              value={values.huddle}
            />
            <Form.Message forceMatch={Boolean(errors?.huddle)}>
              {errors?.huddle}
            </Form.Message>
          </Form.Field>

          <Form.Field name="dueDate">
            <Form.Label>목표 달성 기한은 다음과 같습니다</Form.Label>
            <DatePickerButton
              format={(v) => format(v, 'yyyy년 MM월 dd일')}
              onChange={(date) => {
                date && onChange({ dueDate: date });
              }}
              placeholder="YYYY년 MM월 DD일"
              selected={values.dueDate}
            />
            <Form.Message forceMatch={Boolean(errors?.dueDate)}>
              {errors?.dueDate}
            </Form.Message>
          </Form.Field>
        </Flex>

        <Flex gap="3" justify="end" width="100%">
          <Button
            color="gray"
            onClick={onClickInit}
            size="small"
            type="button"
            variant="outline"
          >
            초기화하기
          </Button>
          <Button onClick={onClickSubmit} size="small" type="button">
            저장하기
          </Button>
        </Flex>
      </Form.Root>
    </Card>
  );
}
