import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { ContentCopyRounded } from '@mui/icons-material';

import * as selectors from '../../../../redux/selectors';
import * as actions from '../../../../redux/slices';
import copyToClipboard from '@/modules/@common/helpers/copy';

import { Form, FormContent, FormRow, FormSection } from '@/modules/@common/Form';
import { IconButton, InputAdornment, Link, TextField } from '@/mui/components';

function ExportTagTab() {
  const dispatch = useDispatch();

  const supply = useSelector(selectors.supplySelector);

  const { adServerUrl } = supply;

  return (
    <Form>
      <FormContent>
        <FormSection>
          <FormRow label="Ad Server URL">
            <TextField
              value={adServerUrl}
              size="small"
              multiline
              rows={4}
              placeholder="Enter URL"
              onChange={({ target }) => dispatch(actions.setSupplyTabAction({ adServerUrl: target.value }))}
              helperText={
                <>
                  {'For supported macros, please see our '}
                  <Link
                    target="_blank"
                    rel="noreferrer"
                    href="https://anyclip.atlassian.net/wiki/spaces/OP/pages/2924150985/MarketPlace+supported+macros"
                  >
                    online help
                  </Link>
                </>
              }
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <IconButton onClick={() => copyToClipboard(adServerUrl)} size="small">
                      <ContentCopyRounded />
                    </IconButton>
                  </InputAdornment>
                ),
              }}
            />
          </FormRow>
        </FormSection>
      </FormContent>
    </Form>
  );
}

export default ExportTagTab;
