import { FC, useCallback, useState } from 'react';
import { Button } from 'components/button';
import { Dropdown } from 'components';
import { Divider } from 'components/divider';
import { Container, Row } from 'components/layout';
import { timezones } from 'assets/timezones';
import { differenceInHours } from 'date-fns';
import { MyProfileFragment } from 'expo-schema';
import { useProfile } from 'hooks';
export const Timezone: FC<TimeZoneProps> = ({ handleUpdate }) => {
  const { profile } = useProfile();
  const [timezone, setTimezone] = useState(
    Intl.DateTimeFormat().resolvedOptions().timeZone || profile?.timezone
  );
  const getLabel = useCallback((zone) => {
    if (!zone) {
      return '';
    }
    const zoneDate = new Date().toLocaleString('en-US', { timeZone: zone });
    const timeZoneDateTime = new Date(zoneDate);
    const myDate = new Date();
    const localOffsetRaw = myDate.getTimezoneOffset();
    let localOffset = localOffsetRaw / 60;

    if (localOffset < 0) {
      localOffset = localOffset * -1;
    }

    const differ = differenceInHours(timeZoneDateTime, myDate);

    if (differ < 0) {
      // timezone is behind local time
      localOffset = differ + localOffset;
    } else {
      localOffset = differ - localOffset;
    }

    let offSet = '';
    if (localOffset >= 0) {
      offSet = `+${localOffset}`;
    } else {
      offSet = localOffset.toString();
    }
    return `(UTC${offSet} ${zone})`;
  }, []);

  const handleTimezone = useCallback(
    (zone) => {
      setTimezone(zone);
      handleUpdate({ timezone: zone } as MyProfileFragment);
    },
    [handleUpdate]
  );

  const localTimezones = timezones.map((zone) => {
    return {
      value: zone,
      label: getLabel(zone),
    };
  });

  return (
    <Container flexShrink={1}>
      <Divider colorVariant="divider-02" size={1} />
      <Container py="m">
        <Dropdown
          onChangeValue={handleTimezone}
          titleColor="body"
          dropdownHeight={150}
          placeholder={'Select Time zone'}
          sizeVariant="medium"
          items={localTimezones}
          value={getLabel(timezone) as string}
          variant="outline"
          titleVariant="caption"
          dropDownListPositionVariant="relative"
          dropdownVariant="outline"
        />
        <Row mt="s" justifyContent="space-between">
          <Button
            colorVariant="primary"
            width={150}
            onPress={() => {}}
            shapeVariant="round"
            sizeVariant="large"
            title="Save Changes"
          />
          <Button
            colorVariant="base-02"
            width={150}
            onPress={() => {}}
            shapeVariant="round"
            sizeVariant="large"
            title="Cancel"
            titleColor="caption"
            hoverColorVariant="base-02-hover"
            hoverTitleColorVariant="title"
          />
        </Row>
      </Container>
    </Container>
  );
};

type TimeZoneProps = {
  handleUpdate: (profile: MyProfileFragment) => void;
};